Rumah >hujung hadapan web >tutorial js >jquery melaksanakan kesan gelongsor code_jquery

jquery melaksanakan kesan gelongsor code_jquery

WBOYasal: 2016-05-16 15:46:071265semak imbas

Dalam projek, terdapat keperluan untuk menggunakan jquery untuk mencapai kesan gelongsor, jadi kandungan yang berkaitan disusun seperti berikut Pengenalan berikut sangat terperinci, dengan penerangan teks dan analisis kod belajar.

Kaedah pelaksanaan satu:

.slideUp([duration][,complete])——Elemen sasaran meluncur ke atas dan disembunyikan; .slideDown([duration][,complete])——Elemen sasaran meluncur ke bawah untuk memaparkan
.slideToggle([duration][,complete])——Jika elemen sasaran disembunyikan, luncurkan ke bawah untuk memaparkannya, jika tidak, luncurkan ke atas untuk menyembunyikannya

Nota: tempoh ialah selang masa untuk pelaksanaan kaedah, dan lengkap ialah fungsi panggil balik.

<!DOCTYPE html> 
<html lang="zh_CN"> 
<head> 
 <meta charset="UTF-8"> 
 <title>滑动效果</title> 
 <script src="js/jquery-2.1.3.min.js"></script> 
 <script src="js/slide.js"></script> 
 <style> 
  img{ 
   width:500px; 
  } 
 </style> 
</head> 
<body> 
<div> 
 <div> 
  <button id="btn1">向上划入隐藏</button> 
  <button id="btn2">向下滑出显示</button> 
  <button id="btn3">向上划入隐藏/向下滑出显示</button> 
 </div> 
 <img src="images/2.jpg"/> 
</div> 
</body> 
</html>

kod slide.js:

/*滑动效果*/ 
$(document).ready(function(){ 
 //向上滑入 
 $('#btn1').click(function(){ 
  $('img').slideUp(2000); 
 }); 
 //向下滑出 
 $('#btn2').click(function(){ 
  $('img').slideDown(2000); 
 }); 
 //切换滑动 
 $('#btn3').click(function(){ 
  $('img').slideToggle(2000); 
 }); 
})

Kaedah pelaksanaan dua:

1. Kesan jQuery___ (kesan gelongsor)

slideDown(kelajuan, [panggilan balik])

Ikhtisar

Memaparkan secara dinamik semua elemen padanan dengan menukar ketinggiannya (meningkat ke bawah), secara pilihan mencetuskan fungsi panggil balik selepas paparan selesai.
Kesan animasi ini hanya melaraskan ketinggian elemen, membenarkan elemen padanan dipaparkan dalam cara "gelongsor". Dalam jQuery 1.3, padding atas dan bawah serta margin juga akan dianimasikan, dan kesannya akan lebih lancar.

Parameter

speedString,Nombor

Rentetan daripada satu daripada tiga kelajuan yang telah ditetapkan ("perlahan", "biasa" atau "cepat") atau nilai milisaat yang mewakili tempoh animasi (seperti: 1000)

panggil balik (pilihan)FungsiFungsi

Fungsi dilaksanakan apabila animasi selesai

Contoh

Penerangan:

Gelangsar perenggan ke bawah secara perlahan dalam 600 milisaat

Kod jQuery:

$("p").slideDown("slow");

Penerangan:

Gunakan 200 milisaat untuk meluncur ke bawah perenggan dengan cepat, dan kemudian kotak dialog akan muncul

Kod jQuery:

$("p").slideDown("fast",function(){ 
 alert("Animation Done."); 
});

slideUp(kelajuan, [panggilan balik])

Ikhtisar

Sembunyikan semua elemen padanan secara dinamik dengan menukar ketinggiannya (menurun ke atas), secara pilihan mencetuskan fungsi panggil balik selepas penyembunyian selesai.

Kesan animasi ini hanya melaraskan ketinggian elemen, membenarkan elemen padanan disembunyikan dalam cara "gelongsor". Dalam jQuery 1.3, padding atas dan bawah serta margin juga akan dianimasikan, dan kesannya akan lebih lancar.

Parameter

speedString,Nombor

Rentetan daripada satu daripada tiga kelajuan yang telah ditetapkan ("perlahan", "biasa" atau "cepat") atau nilai milisaat yang mewakili tempoh animasi (seperti: 1000)

Fungsi panggil balik (pilihan)

Fungsi dilaksanakan apabila animasi selesai

Contoh

Penerangan:

Gelangsar perenggan ke atas perlahan-lahan dalam 600 milisaat

Kod jQuery:

$("p").slideUp("slow");

Penerangan:

Gunakan 200 milisaat untuk meluncurkan perenggan ke atas dengan cepat, kemudian kotak dialog akan muncul

Kod jQuery:

$("p").slideUp("fast",function(){ 
 alert("Animation Done."); 
});

slideTogol(kelajuan, [panggilan balik])

Ikhtisar

Menogol keterlihatan semua elemen padanan melalui perubahan ketinggian dan secara pilihan mencetuskan fungsi panggil balik apabila togol selesai.

Kesan animasi ini hanya melaraskan ketinggian elemen, membenarkan elemen padanan disembunyikan atau dipaparkan dalam cara "gelongsor". Dalam jQuery 1.3, padding atas dan bawah serta margin juga akan dianimasikan, dan kesannya akan lebih lancar.

Parameter

speedString,Nombor

Rentetan satu daripada tiga kelajuan yang telah ditetapkan ("perlahan", "biasa" atau "cepat") atau nilai milisaat yang mewakili tempoh animasi (seperti: 1000)

Fungsi panggil balik (pilihan) Fungsi dilaksanakan apabila animasi selesai

Contoh

Penerangan:

Gelangsar perenggan ke atas atau bawah secara perlahan selama 600 milisaat

Kod jQuery:

$("p").slideToggle("slow");

Penerangan:

Gunakan 200 milisaat untuk meluncurkan perenggan ke atas atau ke bawah dengan cepat, dan kemudian kotak dialog akan muncul

Kod jQuery:

$("p").slideToggle("fast",function(){ 
 alert("Animation Done."); 
});

Kandungan di atas ialah kod jquery untuk melaksanakan kesan gelongsor saya harap anda menyukainya.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk menentukan jenis pembolehubah dalam kemahiran javascript_javascriptArtikel seterusnya：Bagaimana untuk menentukan jenis pembolehubah dalam kemahiran javascript_javascript

Artikel berkaitan

Lihat lagi