Rumah > Artikel > hujung hadapan web > Bagaimana untuk membuat elemen slaid ke atas dan hilang dalam jquery
Bagaimana untuk membuat elemen slaid ke atas dan hilang dalam jquery
- 青灯夜游asal
- 2022-04-27 19:28:122214semak imbas
Kaedah: 1. Gunakan slideUp(), sintaks "$("elemen").slideUp(milisaat)" akan menyembunyikan elemen yang dipilih secara gelongsor 2. Gunakan slideToggle(), sintaks "; $( "Elemen").slideToggle(milisaat)", apabila elemen berada dalam keadaan paparan, elemen akan disembunyikan dalam cara gelongsor.
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi jquery 1.10.2, komputer Dell G3.
Kaedah Jquery untuk merealisasikan elemen menggelongsor ke atas dan hilang
1 Gunakan slideUp()
Kaedah slideUp() menyembunyikan elemen yang dipilih secara gelongsor.
Nota: Elemen tersembunyi tidak akan dipaparkan sepenuhnya (tidak lagi menjejaskan reka letak halaman).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$(".btn1").click(function() {
$("p").slideUp(1000);
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button class="btn1">上滑隐藏元素</button>
</body>
</html>
2 Gunakan slideToggle()
slideToggle() akan menyemak status yang boleh dilihat bagi elemen yang dipilih a Jika elemen kelihatan, luncurkannya ke atas untuk menyembunyikannya, jika elemen tersembunyi, luncurkannya ke bawah untuk menunjukkannya.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$(".btn1").click(function() {
$("p").slideToggle(1000);
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button class="btn1">滑动的隐藏/显示元素</button>
</body>
</html>
[Pembelajaran yang disyorkan: tutorial video jQuery, video bahagian hadapan web]
Atas ialah kandungan terperinci Bagaimana untuk membuat elemen slaid ke atas dan hilang dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!