Animasi berhenti javascript saat diklik

Animasi atau efek membuat konten dapat disajikan untuk pengguna akhir. jQuery menawarkan berbagai metode seperti animate(), fadeIn(), fadeout() dll. , untuk menambahkan animasi atau efek. Bagaimana jika, Anda ingin menghentikan animasi atau efek?

Metode stop() membantu menghentikan animasi atau efek di jQuery. Metode stop menyediakan banyak fungsi, seperti menghentikan animasi/efek secara instan atau berurutan. Artikel ini menunjukkan cara menghentikan animasi atau efek di jQuery

Cara menghentikan animasi atau efek di jQuery

Metode stop() di jQuery membantu menghentikan animasi atau efek yang sedang berjalan. Sintaks metode stop() ditunjukkan di bawah ini

$ ( pemilih ) . berhenti( clearQueue , jumpToEnd );

Pemilih dapat berupa elemen HTML apa pun atau kelas/id dari elemen tersebut. Selain itu, metode stop() menawarkan dua parameter (yang bersifat opsional tetapi tidak diperlukan)

• clearQueue. Itu menerima nilai Boolean (benar atau salah) dan memutuskan tentang penghentian animasi yang akan datang. Nilai false(nilai default) mengarahkan bahwa hanya animasi saat ini yang akan dihentikan, dan animasi antrean lainnya akan dimulai sesudahnya. Sedangkan nilai sebenarnya menghentikan animasi secara instan
• jumpToEnd. Nilai defaultnya salah, jika nilai sebenarnya diberikan maka animasi akan berakhir dan antrian juga dihapus

Sintaks di atas berfungsi untuk berbagai metode jQuery seperti fading(), sliding(), show(), hide() juga

Cara menghentikan animasi di jQuery

Bagian ini mempraktikkan beberapa contoh yang memandu untuk menghentikan animasi dalam berbagai skenario menggunakan metode stop()

Contoh 1. menggunakan metode stop() tanpa parameter

< skrip >

$ ( dokumen ) . siap(fungsi(){

 $ (". mulai") . klik(fungsi(){

  $ ("div") . animasi({

   lebar . "1250 piksel",

  }, 5000);

  });

  $ (". berhenti") . klik(fungsi(){

  $ ("div") . berhenti();

  });

});

skrip>script>

Kode di atas menganimasikan lebar div dengan kecepatan milidetik= “5000“. Selain itu, metode stop() menghentikan animasi yang sedang berlangsung

Keluaran

Sebelum dianimasikan

Setelah menerapkan metode stop() secara acak (berhenti di mana saja)

Contoh 2. menggunakan metode stop() dengan parameter

Kode berikut mempraktikkan metode stop() dengan menggunakan kedua parameter. Dan nilai parameter disetel ke true

< skrip >

$ ( dokumen ) . siap(fungsi(){

  $ (". mulai") . klik(fungsi(){

    $ ("div") . animasi({

      lebar . "1250 piksel",

    }, 5000);

  });

    $ (". berhenti") . klik(fungsi(){

    $ ("div") . berhenti(benar,benar);

  });

});

skrip>script>

Kode di atas menganimasikan properti width dan kemudian metode stop(true,true) diterapkan

Keluaran

Sebelum melakukan tindakan apapun

Setelah memulai animasi, ketika tombol stop-animation diklik, animasi segera berakhir

Cara menghentikan efek fading() di jQuery

Metode stop() di jQuery dapat digunakan untuk menghentikan efek juga. Kode yang diberikan di bawah ini melatih efek fading dan kemudian metode stop() untuk menghentikan efek tersebut

< skrip >

$( dokumen ) . siap(fungsi(){

  $(". pudar") . klik(fungsi(){

    $("div").fadeOut(2500);

    });

  $(". berhenti") . klik(fungsi(){

    $("div").berhenti();

    });

});

skrip>script>

Kode di atas menghilangkan div dengan kecepatan 2500 milidetik dan metode stop digunakan untuk menghentikan metode memudar

Keluaran

Sebelum memulai/menghentikan proses fading

Setelah proses fading-out dimulai, saat tombol stop diklik proses fading akan dihentikan seperti yang ditunjukkan pada gambar di bawah ini (dalam kasus kami)

Kesimpulan

Metode stop() dari jQuery digunakan untuk menghentikan animasi atau efek. Metode stop() menerima dua parameter, dan dapat diterapkan tanpa parameter juga. Kedua parameter tersebut bersifat Boolean dan dengan demikian nilai benar/salah hanya diterima. Anda akan mempelajari penerapan metode stop() untuk menghentikan animasi di jQuery. Selain itu, metode stop() juga dijalankan pada metode fadeOut() di jQuery

Bagaimana cara menghentikan animasi saat klik di JavaScript?

Bagaimana cara menghentikan animasi dengan js?

Fungsi apa yang digunakan untuk menghentikan animasi?

Bagaimana cara menghentikan animasi dari hover?