jquery melaksanakan kesan gelongsor code

jquery melaksanakan kesan gelongsor code_jquery

WBOY

Lepaskan： 2016-05-16 15:46:07

asal

1236 orang telah melayarinya

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>

Salin selepas log masuk

kod slide.js:

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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