Hari ini saya akan membagikan kepada Anda contoh kecil untuk menggunakan Animate untuk mencapai efek switching geser
Semua orang tahu bahwa jQuery menyediakan beberapa metode untuk mencapai efek geser:
1.slidedown ()
2.slideup ()
3.slidetoggle ()
Namun, geser di atas tidak nyaman untuk mengontrol arah gesernya, jadi mari kita tulis sendiri. . .
Kodenya adalah sebagai berikut:
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <style type="text/css"> body{ Lebar: 100%; Tinggi: otomatis; } .content {width: 150px; Tinggi: 50px; Posisi: Absolute; Atas: 20px; Kiri: 20px; meluap: tersembunyi; Latar Belakang: Merah; } .slide-box {width: 300px; Posisi: kerabat; } .slide1 {width: 150px; Tinggi: 50px; float: kiri; Tampilan: blok inline; Line-Height: 50px; Teks-Align: tengah; Latar Belakang-Color: #BDD8CF; } .slide2 {width: 150px; Tinggi: 50px; float: benar; Tampilan: blok inline; Line-Height: 50px; Teks-Align: tengah; Latar Belakang-Color: #C1C4C4; } </tyle> </head> <body> <div> <div> <span> elemen di sebelah kiri </span> <span> elemen di sebelah kanan </span> </div> </div> <script src = "js/jQuery-1.11..min.js" type = "text/javaScript" charset = "utf-8"> </function "" TEXT/TEXT/JAVASCRIPT "UTSET =" UTF-8 "> </"> "TEXT/JAVASCRIPT/JAVASCRIPT" UTSPRIP = "UTF-8"> </">" $ (". Content"). Hover (function () {$ (". Slide-box"). Stop (true) .animate ({right: "150px"}, 'Slow');}, function () {$ ("Kode di atas dapat mencapai efek geser yang lengkap. Tapi satu hal yang perlu diperhatikan,
Seperti yang ditunjukkan pada gambar di atas, peristiwa berhenti () perlu ditambahkan untuk mencegah beberapa peristiwa yang dihasilkan ketika mouse bergerak dengan cepat, membentuk tim tumpukan, menyebabkan efek geser atau bahkan berkedip setelah mouse dihapus.
Artikel di atas Animate menyadari efek switching geser [kode contoh] adalah semua konten yang saya bagikan dengan Anda. Saya harap Anda dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.