Geser ke kanan ke kiri?

Bagaimana saya bisa mendapatkan div dari runtuh ke diperluas (dan sebaliknya), tetapi melakukannya dari kanan ke kiri?

Hampir semua yang saya lihat di sana selalu dari kiri ke kanan.

$("#slide").animate({width:'toggle'},350);

Referensi: https://api.jquery.com/animate/

Ini dapat dicapai secara native menggunakan metode hide / show jQueryUI. Misalnya.

    // To slide something leftwards into view,
    // with a delay of 1000 msec
    $("div").click(function () {
          $(this).show("slide", { direction: "left" }, 1000);
    });

Referensi: http://docs.jquery.com/UI/Effects/Slide

Gunakan ini:

$('#pollSlider-button').animate({"margin-right": '+=200'});

Demo langsung

Versi yang ditingkatkan

Beberapa kode telah ditambahkan ke demo, untuk mencegah margin ganda pada klik ganda: http://jsfiddle.net/XNnHC/942/

Gunakan dengan pelonggaran;)

http://jsfiddle.net/XNnHC/1591/

• Kode JavaScript tambahan dihapus.

• Nama kelas & beberapa kode CSS berubah

• Fitur yang ditambahkan untuk menemukan apakah diperluas atau diciutkan

• Diubah apakah menggunakan efek pelonggaran atau tidak

• Kecepatan animasi berubah

http://jsfiddle.net/XNnHC/1808/

Lihatlah contoh kerja ini di Fiddle, yang menggunakan jQuery UI . Ini adalah solusi yang saya gunakan awalnya dari kiri ke kanan, tetapi saya telah mengubahnya untuk bekerja dari kanan ke kiri.

Hal ini memungkinkan pengguna untuk mengklik tautan dengan cepat tanpa merusak animasi di antara panel yang tersedia.

Kode JavaScript sederhana:

$(document).ready(function(){
    // Mostra e nascondi view-news
    var active = "europa-view";
    $('a.view-list-item').click(function () {
        var divname= this.name;
        $("#"+active ).hide("slide", { direction: "right" }, 1200);
        $("#"+divname).delay(400).show("slide", { direction: "right" }, 1200);
        active = divname;
    });
});

Dapatkan HTML dan CSS di tautan Fiddle.

Menambahkan latar belakang putih dan bantalan kiri hanya untuk presentasi efek yang lebih baik.

Gunakan ini

<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script>
    $(document).ready(function(){
        $("#flip").click(function () {
            $("#left_panel").toggle("slide", { direction: "left" }, 1000);
        });
    });
</script>

$(function() {
  $('.button').click(function() {
    $(this).toggleClass('active');
    $('.yourclass').toggle("slide", {direction: "right"}, 1000);
  });
});

Saya telah melakukannya dengan cara ini:

var btn_width = btn.width();
btn.width(0);
btn.show().animate({width: btn_width}, {duration: 500});

Catatan, simpul "btn" itu harus disembunyikan sebelum animasi, dan Anda mungkin juga perlu mengatur "position: absolute" untuk itu.

Pustaka lain yang layak disebut adalah animate.css . Ini berfungsi baik dengan jQuery, dan Anda dapat melakukan banyak animasi menarik hanya dengan mengaktifkan kelas CSS.

Suka..

$ ("# slide"). toggle (). toggleClass ('animated bounceInLeft');

GreenSock Animation Platform (GSAP) denganTweenLite/TweenMaxmemberikan transisi yang jauh lebih halus dengan kustomisasi yang jauh lebih besar daripada transisi jQuery atau CSS3. Untuk menghidupkan properti CSS dengan TweenLite / TweenMax, Anda juga membutuhkan plugin mereka yang disebut "CSSPlugin". TweenMax menyertakan ini secara otomatis.

Pertama, muat pustaka TweenMax:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>

Atau versi ringan, TweenLite:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/easing/EasePack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenLite.min.js"></script>

Lalu, panggil animasi Anda:

 var myObj= document.getElementById("myDiv");

// Syntax: (target, speed, {distance, ease})
 TweenLite.to(myObj, .7, { x: 500, ease: Power3.easeOut});

Anda juga dapat menyebutnya dengan pemilih ID:

 TweenLite.to("#myID", .7, { x: 500, ease: Power3.easeOut});

Jika Anda memiliki jQuery yang dimuat, Anda dapat menggunakan penyeleksi luas yang lebih canggih, seperti semua elemen yang mengandung kelas tertentu:

 // This will parse the selectors using jQuery's engine.
TweenLite.to(".myClass", .7, { x: 500, ease: Power3.easeOut});

Untuk detail selengkapnya, lihat: Dokumentasi TweenLite

Menurut situs web mereka: "TweenLite adalah alat animasi yang sangat cepat, ringan, dan fleksibel yang berfungsi sebagai fondasi GreenSock Animation Platform (GSAP)."

Anda dapat menentukan lebar elemen sebagai 0, mengambang ke kanan, dan kemudian pada acara yang akan Anda tunjukkan .. itu akan menjadi seperti

$('#the_element_to_slide_from_right_left').animate({ width:'your desired width' }, 600);

Sederhana seperti itu.

Contoh animasi kanan ke kiri tanpa jQuery UI , hanya dengan jQuery (versi apa pun, lihat https://api.jquery.com/animate/ ).

$(document).ready(function() {
  var contentLastMarginLeft = 0;
  $(".wrap").click(function() {
    var box = $(".content");
    var newValue = contentLastMarginLeft;
    contentLastMarginLeft = box.css("margin-left");
    box.animate({
      "margin-left": newValue
    }, 500);
  });
});

.wrap {
  background-color: #999;
  width: 200px;
  overflow: hidden;
}
.content {
  width: 100%;
  margin-left: 100%;
  background-color: #eee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  click here
  <div class="content">
    I would like to have a div go from collapsed to expanded (and vice versa), but do so from right to left. Most everything I see out there is always left to right.
  </div>
</div>

Lihat contoh di sini.

$("#slider").animate({width:'toggle'});

https://jsfiddle.net/q1pdgn96/2/

atau bisa kamu gunakan

$('#myDiv').toggle("slide:right");

Contoh yang saya lakukan menggunakan scroll (hanya HTML, CSS dan JS, hanya dengan pustaka jquery). Ketika menggulir ke bawah tombol akan geser ke kiri.

Juga, saya sarankan Anda jika satu-satunya yang Anda inginkan adalah efek ini, jangan gunakan jQuery UI karena terlalu berat (jika Anda hanya ingin menggunakannya untuk itu).

$(window).scroll(function(){
  if ($(this).scrollTop() > 100) {
          event.preventDefault();
          $(".scrollToTop").css({'transform': 'translate(0px, 0px)'});
      } else {
          $(".scrollToTop").css({'transform': 'translate(40px, 0px)'});
      }
  });

Lihat contoh ini

Jika divposisi Anda benar-benar dan Anda tahu lebarnya, Anda bisa menggunakan:

#myDiv{
position:absolute;
left: 0;
width: 200px;
}

$('#myDiv').animate({left:'-200'},1000);

Yang akan menggesernya keluar layar.

Atau, Anda bisa membungkusnya dengan wadah div

#myContainer{
position:relative;
width: 200px;
overflow: hidden;
}

#myDiv{
position:absolute;
top: 0;
left: 0;
width: 200px;
}

<div id="myContainer">

<div id="myDiv">Wheee!</div>

</div>

$('#myDiv').animate({left:'-200'},1000);