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

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!

jQuery melaksanakan animasi ringkas

Tunjukkan/sembunyikan

(1) Paparan:

show(speed,[callback])

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

panggilan balik: Selepas peralihan selesai, nama kaedah dilaksanakan

(2) Sembunyikan:

hide(speed,[callback])

(3) Ganti:

toggle(speed,[callback]),

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="/static/imghwm/default1.png"  data-src="../素材/im2.jpg"  class="lazy"   alt=""    style="max-width:90%"  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>

2. Kecilkan ke atas/kembang ke bawah

(1) Kecilkan. :

slidUp(speed,[callback])

(2) Kembangkan:

slidDown(speed,[callback])

(3) Ganti:

slidToggle(speed,[callback])

Contohnya adalah seperti berikut:

 $('#btn_up').bind('click',function(){
                $('#img2').slideUp();  //展开
            })
             $('#btn_down').bind('click', function () {
                $('#img2').slideDown(); //收缩
            })
             $('#btn_slide').bind('click', function () {
                $('#img2').slideToggle();  //收缩展开交替
            })

Hasil keluaran:

3. Pudar masuk/keluar

(1 ) Fade in:

fadeIn(speed,[callback])

(2) Fade out:

fadeOut(speed,[callback])

(3) Fade in dan fade out secara bergantian:

fadeToggle(speed,[callback])

Contohnya adalah seperti berikut:

 $('#btn_fadeIn').bind('click', function () {
                $('#img3').fadeIn();   //淡入
            })
            $('#btn_fadeOut').bind('click', function () {
                $('#img3').fadeOut();  //淡出
            })
            $('#btn_fade').bind('click', function () {
                $('#img3').fadeToggle(2000);  //淡入淡出交替
            })

4 Animasi tersuai

$(selector).animate(params,[speed],[easing],[fn])

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(){
            $('button').click(function(){
                $('.bt').animate({
                    left:200,
                    top:150,
                    opacity:0.4
                },1000)
            })
        })

Hasil keluaran:

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!