Bagaimana untuk melaksanakan kesan animasi mudah dengan jQuery? (contoh terperinci)

WBOY
Lepaskan: 2021-12-21 09:00:56
ke hadapan
3425 orang telah melayarinya

Dalam artikel ini, mari kita lihat cara menggunakan jquery untuk mencapai beberapa kesan animasi mudah Melalui jquery, anda boleh mencapai paparan dan sembunyikan yang mudah, mengecil dan mengembang, memudar masuk dan keluar, dan animasi tersuai yang mudah ia akan membantu semua orang!

Bagaimana untuk melaksanakan kesan animasi mudah dengan jQuery? (contoh terperinci)

jQuery melaksanakan animasi ringkas

Tunjukkan/sembunyikan

(1) Paparan:

show(speed,[callback])
Salin selepas log masuk

kelajuan: tempoh kesan. Nilai yang mungkin: perlahan, cepat, milisaat

panggilan balik: Selepas peralihan selesai, nama kaedah dilaksanakan

(2) Sembunyikan:

hide(speed,[callback])
Salin selepas log masuk

(3) Ganti:

toggle(speed,[callback]),
Salin selepas log masuk

Jika 'tunjukkan', maka 'sembunyikan'

Jika 'sembunyikan', maka tunjukkan

Contohnya ialah seperti berikut:

//搭建结构
 <button id="btn_show">显示图片</button>
        <button id="btn_hide">隐藏图片</button>
        <button id="btn_toggle">交替显示隐藏</button>
    <img src="../素材/im2.jpg" alt="" width="200"    style="max-width:90%" id="img1"> 
  
<script>
$(&#39;#btn_show&#39;).bind(&#39;click&#39;,function(){
                $(&#39;#img1&#39;).show(3000);  // 3秒之内显示
            })
             $(&#39;#btn_hide&#39;).bind(&#39;click&#39;, function () {
                $(&#39;#img1&#39;).hide(1000);  // 1秒之内隐藏
            })
             $(&#39;#btn_toggle&#39;).bind(&#39;click&#39;, function () {
                $(&#39;#img1&#39;).toggle();  // 显示或隐藏
            })
</script>
Salin selepas log masuk

Bagaimana untuk melaksanakan kesan animasi mudah dengan jQuery? (contoh terperinci)

2. Kecilkan ke atas/kembang ke bawah

(1) Kecilkan. :

slidUp(speed,[callback])
Salin selepas log masuk

(2) Kembangkan:

slidDown(speed,[callback])
Salin selepas log masuk

(3) Ganti:

slidToggle(speed,[callback])
Salin selepas log masuk

Contohnya adalah seperti berikut:

 $(&#39;#btn_up&#39;).bind(&#39;click&#39;,function(){
                $(&#39;#img2&#39;).slideUp();  //展开
            })
             $(&#39;#btn_down&#39;).bind(&#39;click&#39;, function () {
                $(&#39;#img2&#39;).slideDown(); //收缩
            })
             $(&#39;#btn_slide&#39;).bind(&#39;click&#39;, function () {
                $(&#39;#img2&#39;).slideToggle();  //收缩展开交替
            })
Salin selepas log masuk

Hasil keluaran:

Bagaimana untuk melaksanakan kesan animasi mudah dengan jQuery? (contoh terperinci)

3. Pudar masuk/keluar

(1 ) Fade in:

fadeIn(speed,[callback])
Salin selepas log masuk

(2) Fade out:

fadeOut(speed,[callback])
Salin selepas log masuk

(3) Fade in dan fade out secara bergantian:

fadeToggle(speed,[callback])
Salin selepas log masuk

Contohnya adalah seperti berikut:

 $(&#39;#btn_fadeIn&#39;).bind(&#39;click&#39;, function () {
                $(&#39;#img3&#39;).fadeIn();   //淡入
            })
            $(&#39;#btn_fadeOut&#39;).bind(&#39;click&#39;, function () {
                $(&#39;#img3&#39;).fadeOut();  //淡出
            })
            $(&#39;#btn_fade&#39;).bind(&#39;click&#39;, function () {
                $(&#39;#img3&#39;).fadeToggle(2000);  //淡入淡出交替
            })
Salin selepas log masuk

Bagaimana untuk melaksanakan kesan animasi mudah dengan jQuery? (contoh terperinci)

4 Animasi tersuai

$(selector).animate(params,[speed],[easing],[fn])
Salin selepas log masuk

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.

Contoh adalah seperti berikut:

$(function(){
            $(&#39;button&#39;).click(function(){
                $(&#39;.bt&#39;).animate({
                    left:200,
                    top:150,
                    opacity:0.4
                },1000)
            })
        })
Salin selepas log masuk

Hasil keluaran:

 2.gif

Tutorial video berkaitan yang disyorkan: jQuery tutorial video

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan kesan animasi mudah dengan jQuery? (contoh terperinci). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:csdn.net
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan