Geser ke kanan ke kiri?


390

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.




Jawaban:


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

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


Anda juga dapat menambahkan paddingLeft: 'toggle', paddingRight: 'toggle'ketika elemen memiliki bantalan internal.
piotr_cz

17
Berfungsi dengan baik, hanya slide dari kiri ke kanan ketika saya mencobanya. Mungkinkah membuatnya hidup dengan cara sebaliknya?
twan

2
Satu-satunya masalah adalah bahwa jika ada konten di dalamnya, "terjepit" secara horizontal, menyebabkan kontrol untuk bergerak / mengubah ukuran / membungkus dll. Apakah ada solusi yang baik untuk itu?
Neil Barnwell

1
Kode Anda perlu lebih banyak CSSuntuk terlihat seperti slide nyata
AmerllicA

1
@NeilBarnwell jika Anda bisa, letakkan konten dalam bungkus lebar tetap dan miliki wadahnya overflow: hidden.
Ben Philipp

239

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


141
@ekerner - ini membutuhkan JQueryUI, yang merupakan perpustakaan besar. Jika semua yang Anda inginkan adalah transisi slide sederhana, ini mungkin bukan jawabannya;)
Jesse

9
Ini adalah cara terbaik jika Anda menginstal jQueryUI.
steampowered

5
Untuk memperjelas - file min setidaknya 235kb !! Ini bagus tetapi akan menambah banyak ke halaman Anda sebagai @Jesse menunjukkan
Ukuser32

1
Menggunakan pembangun kustom dan menghapus segala sesuatu kecuali animasi slide, dimungkinkan untuk mendapatkan JS yang diperkecil di bawah 20KB.
Skylar Ittner

Saya berharap dokumen JQuery UI akan memiliki contoh seperti ini. Terima kasih
andreszs

76

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/


2
Menghitung nilai dalam 'px', jadi tidak layak untuk '%'
Faisal Ashfaq

itu bergerak ke kiri di setiap klik.
Elyor

Anda dapat memeriksa lebar luar dan menggunakannya untuk menambahkan margin yang tepat
Tofandel

22

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.


8
membutuhkan jQuery UI
Jeroen K

Iya. Itu ditunjukkan pada tautan contoh yang disediakan [ jsfiddle.net/erwinjulius/az4JL/]
Erwin Julius

19

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>

7
Ya, Anda memerlukan jQuery UI untuk opsi pelonggaran yang diperpanjang
zanderwar

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

11
Saya mendukung komentar tetapi kode ini cukup jelas.
Jon

7

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.


Kenapa tidak digunakan width: 'toggle'? btn.show().animate({width: 'toggle'}, {duration: 500});itulah yang Anda butuhkan, saya percaya.
Aart den Braber

6

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');


5

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)."


4

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.


4

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>



3

atau bisa kamu gunakan

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

4
Ketika menjawab pertanyaan sepuluh tahun dengan empat belas jawaban lain yang ada, akan membantu menjelaskan pendekatan baru apa yang dijawab oleh jawaban Anda, dan apakah itu akan valid ketika pertanyaan itu diajukan, atau jika menggunakan teknik yang tersedia selama sepuluh tahun tersebut. .
Jason Aller

1

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


1
Yap, transisi CSS adalah cara terbaik untuk mencapai ini saat ini.
Tom Tom

1

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);
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.