animasi jQuery

JQuery Animation - kaedah animate()

kaedah jQuery animate() digunakan untuk mencipta animasi tersuai.

Sintaks:

$(selector).animate({params},speed,callback);

Diperlukan parameter params 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 berikut menunjukkan aplikasi mudah kaedah animate(). Ia menggerakkan elemen <div> 250 piksel ke kanan:

Contoh

<!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>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

Jalankan program dan cuba

Petua: Secara lalai, semua elemen HTML mempunyai kedudukan statik dan tidak boleh dialihkan. Jika kita perlu menukarnya, kita perlu menetapkan atribut kedudukan elemen kepada relatif, tetap atau mutlak!

jQuery animate() - Manipulasi berbilang atribut

Sila ambil perhatian bahawa berbilang atribut boleh digunakan pada masa yang sama semasa penjanaan animasi:

<!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',
                    opacity:'0.5',
                    height:'150px',
                    width:'150px'
                });
            });
        });
    </script>
</head>
<body>
<button>开始动画</button>
<div style="background:#4ae936;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

Jalankan atur cara untuk mencubanya

jQuery animate () - Nilai relatif juga boleh ditakrifkan (nilai adalah relatif kepada nilai semasa elemen) menggunakan nilai relatif

. Anda perlu menambah += atau -= di hadapan nilai:

<!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',
                    height:'+=150px',
                    width:'+=150px'
                });
            });
        });
    </script>
</head>
<body>
<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

Jalankan atur cara untuk mencubanya

jQuery animate() - gunakan pratakrif values

Anda juga boleh menghidupkan nilai harta untuk "tunjukkan", "sembunyikan" atau "togol":

<!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({
                    height:'toggle'
                });
            });
        });
    </script>
</head>
<body>
<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

Jalankan atur cara untuk mencubanya

jQuery animate() - Menggunakan fungsi baris gilir

Secara lalai, jQuery menyediakan fungsi baris gilir untuk animasi.

Ini bermakna jika anda menulis berbilang panggilan animate() selepas satu sama lain, jQuery akan mencipta baris gilir "dalaman" yang mengandungi panggilan kaedah tersebut. Kemudian jalankan panggilan bernyawa ini satu demi satu.

<!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(){
                var div=$("div");
                div.animate({height:'300px',opacity:'0.4'},"slow");
                div.animate({width:'300px',opacity:'0.8'},"slow");
                div.animate({height:'100px',opacity:'0.4'},"slow");
                div.animate({width:'100px',opacity:'0.8'},"slow");
            });
        });
    </script>
</head>
<body>
<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

Jalankan atur cara dan cuba

Contoh berikut mengalihkan elemen <div> ke kanan sebanyak 100 piksel, dan kemudian meningkatkan saiz fon teks:

<!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(){
                var div=$("div");
                div.animate({left:'100px'},"slow");
                div.animate({fontSize:'3em'},"slow");
            });
        });
    </script>
</head>
<body>
<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
</html>

Jalankan Cuba program

Meneruskan pembelajaran

fail baharu

<!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(){ var div=$("div"); div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({width:'300px',opacity:'0.8'},"slow"); div.animate({height:'100px',opacity:'0.4'},"slow"); div.animate({width:'100px',opacity:'0.8'},"slow"); }); }); </script> </head> <body> <button>开始动画</button> <div style="background:#98bf21;height:100px;width:100px;position:absolute;"> </div> </body> </html>

serahkan Tetapkan Semula Kod

Operasi automatik

animasi jQuery

peringkat rendahTutorial tapak web tiruan perusahaan Imperial CMS

peringkat rendahPemula dengan asas sifar dalam WordPress membina blog peribadi dan laman web korporat

peringkat rendahVideo arahan pembinaan tapak web berasaskan sifar CMS muktamad

peringkat rendahProjek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]

PertengahanVue3.0 daripada 0 untuk membina amalan projek sistem pengurusan belakang universal

peringkat rendahKursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]

peringkat rendahTutorial bahagian hadapan WEB [HTML5+CSS3+JS]

peringkat rendahBermula dengan cepat dengan apipost

PertengahanTutorial praktikal Vue3+TypeScript amalan projek peringkat perusahaan

peringkat rendahMari kita bercakap secara ringkas tentang memulakan perniagaan dalam PHP

PertengahanProjek e-dagang VUE (pertempuran sebenar projek dua bahagian hadapan & belakang)

peringkat rendahAplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]