Rumah > Artikel > hujung hadapan web > Apakah kegunaan kaedah jquery stop()?

Apakah kegunaan kaedah jquery stop()?

青灯夜游asal: 2022-03-01 18:32:382849semak imbas

Dalam jquery, kaedah stop() digunakan untuk menghentikan kesan animasi yang sedang berjalan untuk elemen yang dipilih Sintaks ialah "$(selector).stop(stopAll,goToEnd)"; kedua-duanya tersedia Pilih parameter, nilainya adalah semua nilai Boolean, dan nilai lalai adalah palsu.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi jquery 1.10.2, komputer Dell G3.

Dalam jquery, kaedah stop() digunakan untuk menghentikan kesan animasi yang sedang berjalan untuk elemen yang dipilih.

Sintaks:

$(selector).stop(stopAll,goToEnd)

stopAll dan goToEnd ialah parameter pilihan, nilainya ialah nilai Boolean dan nilai lalai adalah palsu. stopAll bermaksud menghentikan animasi baris gilir. Apabila nilainya palsu, hanya animasi semasa dihentikan apabila nilainya benar, animasi semasa dan semua animasi baris gilir berikutnya dihentikan. goToEnd bermaksud melonjak animasi ke keadaan akhir kesan animasi semasa.

Antaranya, kaedah stop() mempunyai 4 bentuk, seperti yang ditunjukkan dalam Jadual 1.

表 1：stop() 方法的 4 种形式
形式	说明
stop()	等价于 stop(false, false)，仅停止当前动画，后面的动画还可以继续执行
stop(true)	等价于 stop(true, false)，停止当前动画，并且停止后面的动画
stop(true, true)	当前动画继续执行，只停止后面的动画
stop(false, true)	停止当前动画，跳到最后一个动画，并且执行最后一个动画

Secara umumnya, dalam pembangunan sebenar, kami hanya menggunakan parameter pertama kaedah stop() dan jarang menggunakan parameter kedua.

Contoh:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:50px;
            height:50px;
            background-color:lightskyblue;
        }
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/jquery.color.js"></script>
    <script>
        $(function () {
            $("#btn-start").click(function () {
                $("div").animate({ "width": "200px" }, 2000)
                      .animate({ "background-color": "red" }, 2000)
                      .animate({ "height": "200px" }, 2000)
                      .animate({ "background-color": "blue" }, 2000);
            });
            $("#btn-stop").click(function () {
                $("div").stop();
            })
        })
    </script>
</head>
<body>
    <input id="btn-start" type="button" value="开始" />
    <input id="btn-stop" type="button" value="停止" /><br />
    <div></div>
</body>
</html>

Kesan pratonton ditunjukkan dalam gambar di bawah.

Apakah kegunaan kaedah jquery stop()?

Dalam contoh ini, kami mentakrifkan 4 animasi menggunakan kaedah animate(). Selepas kami mengklik butang [Mula], jika kami mengklik butang [Berhenti] sekali lagi selepas beberapa ketika, ia akan menghentikan serta-merta animasi yang sedang dilaksanakan (iaitu, menghentikan kaedah animate() semasa), dan kemudian melompat ke animasi seterusnya (iaitu, kaedah animate() seterusnya).

Jika anda mengklik butang [Berhenti] sekali lagi, ia akan melompat ke animasi seterusnya, dan seterusnya. Rakan-rakan boleh mengujinya sendiri untuk merasainya.

Jika anda ingin menghentikan semua animasi baris gilir, anda boleh melakukannya dengan mentakrifkan parameter pertama kaedah stop() sebagai benar.

$("#btn-stop").click(function () {
    $("div").stop(true);
})

Kesan pratonton ditunjukkan dalam gambar di bawah.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div
        {
            width:50px;
            height:50px;
            background-color:lightskyblue;
        }
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("div").hover(function () {
                $(this).animate({ "height": "150px" }, 500);
            }, function () {
                $(this).animate({ "height": "50px" }, 500); //移出时返回原状态
            })
        })
    </script>
</head>
<body>
    <div></div>
</body>
</html>

Dalam contoh ini, kami menggunakan kaedah hover() untuk mentakrifkan kesan animasi apabila penuding tetikus bergerak masuk dan keluar. Apabila kita memindahkan elemen masuk atau keluar dengan cepat, kita akan menemui pepijat yang sangat pelik: elemen itu akan terus menjadi lebih panjang atau lebih pendek! Dalam erti kata lain, animasi akan terus dilaksanakan dan tidak boleh dihentikan sama sekali. Apakah kegunaan kaedah jquery stop()?

Pepijat "tidak boleh berhenti" seperti ini sering ditemui dalam pembangunan sebenar, jadi rakan-rakan mesti memberi perhatian khusus kepadanya. Sebenarnya, pepijat ini disebabkan oleh pengumpulan animasi. Dalam jQuery, jika animasi tidak selesai, ia akan ditambahkan pada "baris gilir animasi". Dalam contoh ini, setiap kali elemen dipindahkan masuk atau keluar, animasi akan dihasilkan Jika animasi belum selesai, ia akan ditambahkan pada baris gilir animasi, dan kemudian animasi yang belum selesai akan terus menjadi. dilaksanakan sehingga semua animasi selesai.

Untuk pepijat ini, kita hanya perlu menambah kaedah stop() sebelum animasi yang dihasilkan dengan memindahkan masuk atau keluar elemen dilaksanakan, yang boleh diselesaikan dengan mudah. Kod diubah suai terakhir adalah seperti berikut.

Untuk pepijat yang disebabkan oleh pengumpulan animasi ini, kami juga boleh menggunakan is(":animated") untuk menentukan status animasi semasa dan menyelesaikannya. Kaedah is(":animated") akan diperkenalkan secara terperinci kemudian.

$("div").hover(function () {
    $(this).stop().animate({ "height": "150px" }, 500);
}, function () {
    $(this).stop().animate({ "height": "50px" }, 500);    //移出时返回原状态
})

Malah, jQuery juga mempunyai kaedah untuk mengganggu animation-finish(). Kaedah ini berfungsi sama dengan kaedah stop(true,true) kerana ia mengosongkan animasi beratur dan menyebabkan animasi semasa melonjak ke nilai akhir. Walau bagaimanapun, tidak seperti stop(true,true), ia menyebabkan semua animasi beratur melonjak ke nilai akhir mereka. Kaedah finish() tidak banyak digunakan, mari kita lihat secara ringkas.

[Pembelajaran yang disyorkan:

tutorial video jQuery

video pembangunan bahagian hadapan web]

Atas ialah kandungan terperinci Apakah kegunaan kaedah jquery stop()?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

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

Artikel sebelumnya：Bagaimana untuk mengubah suai atribut jenis dalam jqueryArtikel seterusnya：Bagaimana untuk mengubah suai atribut jenis dalam jquery

Artikel berkaitan

Lihat lagi