kesan jQuery
Kesan jQuery - Sembunyikan dan Tunjukkan
Sembunyikan, tunjukkan, togol, slaid, pudar dan animasikan!
jQuery hide() dan tunjukkan()
melalui jQuery , anda boleh menggunakan kaedah hide() dan show() untuk menyembunyikan dan menunjukkan elemen HTML
Sintaks:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
Parameter kelajuan pilihan menentukan kelajuan menyembunyikan/menunjukkan dan boleh mengambil nilai berikut: "perlahan", "cepat" atau milisaat.
Parameter panggil balik pilihan ialah nama fungsi yang akan dilaksanakan selepas menyembunyikan atau menunjukkan selesai.
jQuery toggle()
Dengan jQuery, anda boleh menggunakan kaedah toggle() untuk menogol kaedah hide() dan show().
Tunjukkan unsur tersembunyi dan sembunyikan unsur yang dipaparkan.
Sintaks:
$(selector).togol(speed,callback);
Parameter kelajuan pilihan menentukan kelajuan menyembunyikan/menunjukkan dan boleh mengambil nilai berikut : " perlahan", "cepat" atau milisaat.
Parameter panggil balik pilihan ialah nama fungsi yang akan dilaksanakan selepas kaedah togol() selesai.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".hot").toggle();
});
});
</script>
</head>
<body>
<button>隐藏/显示</button>
<div class="hot">
<img src="http://www.pp3.cn/uploads/201510/2015102409.jpg" height="300px" width="200px">
<p>这是一张图片</p>
</div>
</body>
</html>Pudar
Kaedah Pudar jQuery
Dengan jQuery, anda boleh mencapai kesan pudar elemen.
jQuery mempunyai empat kaedah fade berikut:
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
kaedah jQuery fadeIn()
jQuery fadeIn() digunakan untuk pudar dalam elemen tersembunyi.
Sintaks:
$(selector).fadeIn(speed,callback);
Parameter kelajuan pilihan menentukan tempoh kesan. Ia boleh mengambil nilai berikut: "perlahan", "cepat" atau milisaat. .
Parameter panggil balik pilihan ialah nama fungsi yang akan dilaksanakan selepas pudar selesai.
kaedah jQuery fadeOut()
kaedah jQuery fadeOut() digunakan untuk memadamkan elemen yang boleh dilihat.
Sintaks:
$(selector).fadeOut(speed,callback);
Parameter kelajuan pilihan menentukan tempoh kesan. Ia boleh mengambil nilai berikut: "perlahan", "cepat" atau milisaat.
Parameter panggil balik pilihan ialah nama fungsi yang akan dilaksanakan selepas pudar selesai.
kaedah jQuery fadeToggle()
kaedah jQuery fadeToggle() boleh bertukar antara kaedah fadeIn() dan fadeOut().
fadeToggle() menambah kesan fade-in pada elemen jika ia sudah pudar.
fadeToggle() menambah kesan fade out pada elemen jika ia sudah pudar masuk.
Sintaks:
$(selector).fadeToggle(speed,callback);
Parameter kelajuan pilihan menentukan tempoh kesan. Ia boleh mengambil nilai berikut: "perlahan", "cepat" atau milisaat.
Parameter panggil balik pilihan ialah nama fungsi yang akan dilaksanakan selepas pudar selesai.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>实例演示了 fadeToggle() 使用了不同的 speed(速度) 参数。</p>
<button>点击淡入/淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>kaedah jQuery fadeTo()
kaedah jQuery fadeTo() membenarkan kecerunan kepada kelegapan tertentu (nilai antara 0 dan 1).
Sintaks:
$(selector).fadeTo(speed,opacity,callback);
Parameter kelajuan yang diperlukan menentukan tempoh kesan. Ia boleh mengambil nilai berikut: "perlahan", "cepat" atau milisaat.
Parameter kelegapan yang diperlukan dalam kaedah fadeTo() menetapkan kesan pudar kepada kelegapan yang diberikan (nilai antara 0 dan 1).
Parameter panggil balik pilihan ialah nama fungsi yang akan dilaksanakan selepas fungsi selesai.
Gelongsor
Kaedah Gelongsor jQuery
Dengan jQuery anda boleh mencipta kesan gelongsor pada elemen.
jQuery mempunyai kaedah gelongsor berikut:
slideDown()
slideUp()
slideToggle()
jQuery kaedah slideDown ()
kaedah jQuery slideDown() digunakan untuk meluncur elemen ke bawah.
Sintaks:
$(selector).slideDown(speed,callback);
Parameter kelajuan pilihan menentukan tempoh kesan. Ia boleh mengambil nilai berikut: "perlahan", "cepat" atau milisaat.
Parameter panggil balik pilihan ialah nama fungsi yang akan dilaksanakan selepas gelongsor selesai.
kaedah jQuery slideUp()
kaedah jQuery slideUp() digunakan untuk meluncur elemen ke atas.
Sintaks:
$(selector).slideUp(speed,callback);
Parameter kelajuan pilihan menentukan tempoh kesan. Ia boleh mengambil nilai berikut: "perlahan", "cepat" atau milisaat.
Parameter panggil balik pilihan ialah nama fungsi yang akan dilaksanakan selepas gelongsor selesai.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideUp("slow");
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
}
</style>
</head>
<body>
<div id="flip">点我拉起面板</div>
<div id="panel">Hello world!</div>
</body>
</html>kaedah jQuery slideToggle()
kaedah jQuery slideToggle() boleh bertukar antara kaedah slideDown() dan slideUp().
Jika elemen meluncur ke bawah, slideToggle() meluncurkannya ke atas.
Jika elemen meluncur ke atas, slideToggle() meluncurkannya ke bawah.
$(selector).slideToggle(speed,callback);
Parameter kelajuan pilihan menentukan tempoh kesan. Ia boleh mengambil nilai berikut: "perlahan", "cepat" atau milisaat.
Parameter panggil balik pilihan ialah nama fungsi yang akan dilaksanakan selepas gelongsor selesai.
Animasi
animasi jQuery - kaedah animate()
kaedah jQuery animate() ialah digunakan untuk membuat animasi tersuai.
Sintaks:
$(selector).animate({params},speed,callback);Parameter params yang diperlukan mentakrifkan sifat CSS yang membentuk animasi.
Parameter kelajuan pilihan menentukan tempoh kesan. Ia boleh mengambil nilai berikut: "perlahan", "cepat" atau milisaat.
Parameter panggil balik pilihan ialah nama fungsi yang akan dilaksanakan selepas animasi selesai.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:yellow;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>animasi henti jQuery
kaedah jQuery stop()
kaedah jQuery stop() Digunakan untuk menghentikan animasi atau kesan sebelum ia selesai.
Kaedah stop() berfungsi dengan semua fungsi kesan jQuery, termasuk slaid, pudar dan animasi tersuai.
Sintaks:
$(selector).stop(stopAll,goToEnd);
Parameter stopAll pilihan menentukan sama ada baris gilir animasi harus dikosongkan. Lalai adalah palsu, yang hanya menghentikan animasi aktif dan membenarkan mana-mana animasi beratur untuk dilaksanakan ke belakang.
Parameter goToEnd pilihan menentukan sama ada untuk melengkapkan animasi semasa dengan segera. Lalai adalah palsu.
Jadi, secara lalai, stop() akan mengosongkan animasi semasa yang dinyatakan pada elemen yang dipilih.
Contoh berikut menunjukkan kaedah stop() tanpa parameter:
rreee
![Projek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Kursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutorial bahagian hadapan WEB [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Aplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
