Pada artikel ini kita akan melihat bagaimana menggunakan berbagai metode JQuery untuk menghasilkan animasi.
hide() Dan show()Metode hide() hanya mengatur style inline display: none untuk item yang dipilih. Sebaliknya, metode show() mengembalikan properti tampilan.
Mari kita lihat contohnya:
<script>
$(document).ready(function(){
// Hide displayed paragraphs
$(".hide-btn").click(function(){
$("p").hide();
});
// Show hidden paragraphs
$(".show-btn").click(function(){
$("p").show();
});
});
</script>Dalam kasus pertama, paragraf disembunyikan saat Anda mengklik tombol (hide-btn), dalam kasus kedua paragraf ditampilkan saat Anda mengklik tombol (show-btn).
Anda juga dapat menentukan parameter durasi, untuk menganimasikan tampilan dan menyembunyikan efek untuk jangka waktu tertentu.
Durasi dapat ditentukan menggunakan salah satu pra stringdefimalam 'slow' o 'fast', atau dalam beberapa milidetik, untuk presisi yang lebih tinggi; nilai yang lebih tinggi menunjukkan animasi yang lebih lambat.
<script>
$(document).ready(function(){
// Hide displayed paragraphs with different speeds
$(".hide-btn").click(function(){
$("p.normal").hide();
$("p.fast").hide("fast");
$("p.slow").hide("slow");
$("p.very-fast").hide(50);
$("p.very-slow").hide(2000);
});
// Show hidden paragraphs with different speeds
$(".show-btn").click(function(){
$("p.normal").show();
$("p.fast").show("fast");
$("p.slow").show("slow");
$("p.very-fast").show(50);
$("p.very-slow").show(2000);
});
});
</script>String sebelumnyadefinita 'fast' menunjukkan durasi 200 milidetik, sedangkan string 'slow' menunjukkan durasi 600 milidetik.
Kita dapat menentukan fungsi dari callback akan dieksekusi setelah penyelesaian metode show() atau dell ' hide()
<script>
$(document).ready(function(){
// Display alert message after hiding paragraphs
$(".hide-btn").click(function(){
$("p").hide("slow", function(){
// Code to be executed
alert("The hide effect is completed.");
});
});
// Display alert message after showing paragraphs
$(".show-btn").click(function(){
$("p").show("slow", function(){
// Code to be executed
alert("The show effect is completed.");
});
});
});
</script>Metode jQuery toggle() tampilkan atau sembunyikan item sedemikian rupa sehingga jika item tersebut pertama kali ditampilkan, item tersebut akan disembunyikan; sebaliknya jika disembunyikan, itu akan ditampilkan (praktis mengubah visibilitasnya).
<script>
$(document).ready(function(){
// Toggles paragraphs display
$(".toggle-btn").click(function(){
$("p").toggle();
});
});
</script>Demikian pula, Anda dapat menentukan parameternya duration untuk metode toggle(), sedemikian rupa untuk menganimasikan transisi antara metode yang terlihat dan tersembunyi, seperti metode show() e hide()
<script>
$(document).ready(function(){
// Toggles paragraphs with different speeds
$(".toggle-btn").click(function(){
$("p.normal").toggle();
$("p.fast").toggle("fast");
$("p.slow").toggle("slow");
$("p.very-fast").toggle(50);
$("p.very-slow").toggle(2000);
});
});
</script>Demikian pula, Anda juga dapat menentukan fungsi dari callback untuk metode toggle().
<script>
$(document).ready(function(){
// Display alert message after toggling paragraphs
$(".toggle-btn").click(function(){
$("p").toggle(1000, function(){
// Code to be executed
alert("The toggle effect is completed.");
});
});
});
</script>fadeIn() e fadeOut()Anda dapat menggunakan metode jQuery fadeIn()e fadeOut() untuk menampilkan atau menyembunyikan elemen HTML, secara bertahap menambah atau mengurangi opasitasnya dan menciptakan efek pemudaran.
<script>
$(document).ready(function(){
// Fading out displayed paragraphs
$(".out-btn").click(function(){
$("p").fadeOut();
});
// Fading in hidden paragraphs
$(".in-btn").click(function(){
$("p").fadeIn();
});
});
</script>Seperti metode efek jQuery lainnya, Anda dapat secara opsional menentukan parameter durasi atau kecepatan untuk metode fadeIn()e fadeOut(), untuk mengontrol durasi fade. Durasi dapat ditentukan menggunakan salah satu pra stringdefimalam 'slow' o 'fast', atau dalam beberapa milidetik; nilai yang lebih tinggi menunjukkan animasi yang lebih lambat.
<script>
$(document).ready(function(){
// Fading out displayed paragraphs with different speeds
$(".out-btn").click(function(){
$("p.normal").fadeOut();
$("p.fast").fadeOut("fast");
$("p.slow").fadeOut("slow");
$("p.very-fast").fadeOut(50);
$("p.very-slow").fadeOut(2000);
});
// Fading in hidden paragraphs with different speeds
$(".in-btn").click(function(){
$("p.normal").fadeIn();
$("p.fast").fadeIn("fast");
$("p.slow").fadeIn("slow");
$("p.very-fast").fadeIn(50);
$("p.very-slow").fadeIn(2000);
});
});
</script>efek dari metode fadeIn() / fadeOut() itu mirip dengan show() / hide(), tetapi tidak seperti metode show() / hide(), yang pertama hanya menganimasikan opasitas elemen target dan tidak menganimasikan ukurannya.
Anda juga dapat menentukan fungsi dari callback untuk dijalankan setelah metode selesai fadeIn() / fadeOut().
<script>
$(document).ready(function(){
// Display alert message after fading out paragraphs
$(".out-btn").click(function(){
$("p").fadeOut("slow", function(){
// Code to be executed
alert("The fade-out effect is completed.");
});
});
// Display alert message after fading in paragraphs
$(".in-btn").click(function(){
$("p").fadeIn("slow", function(){
// Code to be executed
alert("The fade-in effect is completed.");
});
});
});
</script>fadeToggle()Metode jQuery fadeToggle() menampilkan atau menyembunyikan elemen yang dipilih dengan menganimasikan opasitasnya sedemikian rupa sehingga jika elemen tersebut pertama kali ditampilkan, elemen tersebut akan memudar; jika disembunyikan, itu akan memudar (yaitu mengaktifkan efek fade).
<script>
$(document).ready(function(){
// Toggles paragraphs display with fading
$(".toggle-btn").click(function(){
$("p").fadeToggle();
});
});
</script>Anda juga dapat menentukan parameter seumur hidup untuk metode ini fadeToggle() Adapun metodenya fadeIn() / fadeOut(), untuk mengontrol durasi atau kecepatan animasi pudar.
<script>
$(document).ready(function(){
// Fade Toggles paragraphs with different speeds
$(".toggle-btn").click(function(){
$("p.normal").fadeToggle();
$("p.fast").fadeToggle("fast");
$("p.slow").fadeToggle("slow");
$("p.very-fast").fadeToggle(50);
$("p.very-slow").fadeToggle(2000);
});
});
</script>Metode fadeToggle() juga memiliki kemampuan untuk menentukan suatu fungsi callback.
<script>
$(document).ready(function(){
// Display alert message after fade toggling paragraphs
$(".toggle-btn").click(function(){
$("p").fadeToggle(1000, function(){
// Code to be executed
alert("The fade-toggle effect is completed.");
});
});
});
</script>fadeTo()Metode jQuery fadeTo() itu mirip dengan metode fadeIn(), tetapi tidak seperti metode fadeIn(), metode fadeTo() memungkinkan Anda memadukan elemen hingga tingkat opacity tertentu.
$(selector).fadeTo(speed, opacity, callback);Parameter yang dibutuhkan opacity menentukan opasitas akhir dari elemen target yang dapat berupa angka antara 0 dan 1. Parameter duration o speed itu juga diperlukan untuk metode ini yang menentukan durasi animasi memudar.
<script>
$(document).ready(function(){
// Fade to paragraphs with different opacity
$(".to-btn").click(function(){
$("p.none").fadeTo("fast", 0);
$("p.partial").fadeTo("slow", 0.5);
$("p.complete").fadeTo(2000, 1);
});
});
</script>slideUp() e slideDown()Metode jQuery slideUp() e slideDown() digunakan untuk menyembunyikan atau menampilkan elemen HTML dengan secara bertahap mengurangi atau menambah tingginya (yaitu menggulirnya ke atas atau ke bawah).
<script>
$(document).ready(function(){
// Slide up displayed paragraphs
$(".up-btn").click(function(){
$("p").slideUp();
});
// Slide down hidden paragraphs
$(".down-btn").click(function(){
$("p").slideDown();
});
});
</script>Seperti metode efek jQuery lainnya, Anda dapat secara opsional menentukan parameter durasi atau kecepatan untuk metode tersebut slideUp() e slideDown() untuk mengontrol durasi animasi slide. Durasi dapat ditentukan menggunakan salah satu pra stringdefimalam 'slow' o 'fast', atau dalam beberapa milidetik; nilai yang lebih tinggi menunjukkan animasi yang lebih lambat.
<script>
$(document).ready(function(){
// Sliding up displayed paragraphs with different speeds
$(".up-btn").click(function(){
$("p.normal").slideUp();
$("p.fast").slideUp("fast");
$("p.slow").slideUp("slow");
$("p.very-fast").slideUp(50);
$("p.very-slow").slideUp(2000);
});
// Sliding down hidden paragraphs with different speeds
$(".down-btn").click(function(){
$("p.normal").slideDown();
$("p.fast").slideDown("fast");
$("p.slow").slideDown("slow");
$("p.very-fast").slideDown(50);
$("p.very-slow").slideDown(2000);
});
});
</script>Anda juga dapat menentukan fungsi panggilan balik untuk dijalankan setelah penyelesaian metode slideUp() o slideDown().
<script>
$(document).ready(function(){
// Display alert message after sliding up paragraphs
$(".up-btn").click(function(){
$("p").slideUp("slow", function(){
// Code to be executed
alert("The slide-up effect is completed.");
});
});
// Display alert message after sliding down paragraphs
$(".down-btn").click(function(){
$("p").slideDown("slow", function(){
// Code to be executed
alert("The slide-down effect is completed.");
});
});
});
</script>slideToggle()Metode jQuery slideToggle() tampilkan atau sembunyikan elemen yang dipilih dengan menganimasikan tingginya sehingga jika elemen pertama kali ditampilkan, elemen tersebut akan digulir ke atas; jika disembunyikan, itu akan digulir ke bawah, yaitu beralih antar metode slideUp() e slideDown().
<script>
$(document).ready(function(){
// Toggles paragraphs display with sliding
$(".toggle-btn").click(function(){
$("p").slideToggle();
});
});
</script>Demikian pula, Anda dapat menentukan parameter seumur hidup untuk metode ini slideToggle() bagaimana slideUp() e slideDown().
<script>
$(document).ready(function(){
// Slide Toggles paragraphs with different speeds
$(".toggle-btn").click(function(){
$("p.normal").slideToggle();
$("p.fast").slideToggle("fast");
$("p.slow").slideToggle("slow");
$("p.very-fast").slideToggle(50);
$("p.very-slow").slideToggle(2000);
});
});
</script>Demikian pula, Anda juga dapat menentukan fungsi panggilan balik untuk metode tersebut slideToggle().
<script>
$(document).ready(function(){
// Display alert message after slide toggling paragraphs
$(".toggle-btn").click(function(){
$("p").slideToggle(1000, function(){
// Code to be executed
alert("The slide-toggle effect is completed.");
});
});
});
</script>animate()Metode jQuery animate() digunakan untuk membuat animasi khusus. Metode animate() digunakan untuk menganimasikan properti CSS numerik, seperti width, height, margin, padding, opacity, top, left dll. tapi sifat non-numerik seperti color o background-color mereka tidak dapat dianimasikan menggunakan fungsionalitas dasar jQuery.
Sintaks dasar dari metode ini animate() berikut ini:
$(selector).animate({ properties }, duration, callback);Parameter metode animate() memiliki arti sebagai berikut:
'slow' o 'fast', atau dalam beberapa milidetik; nilai yang lebih tinggi menunjukkan animasi yang lebih lambat.Di bawah ini adalah contoh sederhana dari metode tersebut animate() yang menganimasikan gambar dari posisi aslinya ke kanan sebesar 300 piksel pada klik tombol.
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").animate({
left: 300
});
});
});
</script>Anda juga dapat menganimasikan beberapa properti elemen sekaligus menggunakan metode ini animate(). Semua properti dianimasikan secara bersamaan tanpa penundaan.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: "300px",
height: "300px",
marginLeft: "150px",
borderWidth: "10px",
opacity: 0.5
});
});
});
</script>Anda juga dapat menganimasikan beberapa properti elemen satu per satu, dalam antrean menggunakan fungsi penggabungan jQuery.
Contoh berikut menunjukkan antrean atau animasi jQuery berantai, di mana setiap animasi akan dimulai setelah animasi sebelumnya pada elemen selesai. Kita akan melihat fungsi penggabungan di artikel mendatang.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box")
.animate({width: "300px"})
.animate({height: "300px"})
.animate({marginLeft: "150px"})
.animate({borderWidth: "10px"})
.animate({opacity: 0.5});
});
});
</script>Itu juga mungkin defimenyelesaikan nilai relatif untuk properti animasi. Jika suatu nilai ditentukan dengan awalan += o -=, nilai target dihitung dengan menambahkan atau mengurangi angka yang ditentukan dari nilai properti saat ini.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
top: "+=50px",
left: "+=50px",
width: "+=50px",
height: "+=50px"
});
});
});
</script>Selain nilai numerik, setiap properti dapat menerima string 'show', 'hide' e 'toggle'. Ini akan sangat berguna dalam situasi di mana Anda hanya ingin menganimasikan properti dari nilai saat ini ke nilai awalnya dan sebaliknya.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: 'toggle'
});
});
});
</script>stop()Metode jQuery stop() digunakan untuk menghentikan animasi atau efek jQuery yang sedang berjalan pada elemen yang dipilih sebelum selesai.
Sintaks dasar dari metode ini stop() jQuery dapat diberikan dengan:
$(selector).stop(stopAll, goToEnd);Parameter dalam sintaks di atas memiliki arti sebagai berikut:
false, artinya hanya animasi saat ini yang akan dihentikan, animasi lainnya dalam antrean akan dieksekusi nanti.false.Berikut adalah contoh sederhana yang menunjukkan metode ini stop() dalam aksi nyata di mana Anda dapat memulai dan menghentikan animasi pada klik tombol.
<script>
$(document).ready(function(){
// Start animation
$(".start-btn").click(function(){
$("img").animate({left: "+=150px"}, 2000);
});
// Stop running animation
$(".stop-btn").click(function(){
$("img").stop();
});
// Start animation in the opposite direction
$(".back-btn").click(function(){
$("img").animate({left: "-=150px"}, 2000);
});
// Reset to default
$(".reset-btn").click(function(){
$("img").animate({left: "0"}, "fast");
});
});
</script>Berikut adalah contoh lain dari metode ini di mana jika Anda mengklik tombol lagiSlide Toggle” setelah memulai animasi tetapi sebelum selesai, animasi akan segera dimulai dengan arah yang berlawanan dari titik awal yang disimpan.
<script>
$(document).ready(function(){
// Kill and toggle the current sliding animation
$(".toggle-btn").on("click", function(){
$(".box").stop().slideToggle(1000);
});
});
</script>Saat membuat efek hover animasi, salah satu masalah paling umum yang mungkin Anda temui adalah antrean beberapa animasi, saat Anda dengan cepat menempatkan dan menghapus kursor mouse. Mengapa, dalam situasi ini, mouseenter itu mouseleave acara dipecat dengan cepat sebelum animasi selesai. Untuk menghindari masalah ini dan membuat efek hover yang bagus dan halus, Anda dapat menambahkan stop(true, true)ke rantai metode, seperti:
<script>
$(document).ready(function(){
$(".box").hover(function(){
$(this).find("img").stop(true, true).fadeOut();
}, function(){
$(this).find("img").stop(true, true).fadeIn();
});
});
</script>Pernyataan JavaScript dieksekusi baris demi baris. Namun, karena efek jQuery membutuhkan waktu untuk selesai, kode baris berikutnya mungkin berjalan sementara efek sebelumnya masih berjalan. Untuk mencegah hal ini terjadi, jQuery menyediakan fungsi panggilan balik untuk setiap metode efek.
Fungsi panggilan balik adalah fungsi yang berjalan setelah efek selesai. Fungsi panggilan balik diteruskan sebagai argumen ke metode efek, dan biasanya muncul sebagai argumen metode terakhir. Misalnya, sintaks dasar metode efek jQuery slideToggle() dengan fungsi callback yang dapat ditentukan sebagai berikut:
$(selector).slideToggle(duration, callback);Pertimbangkan contoh berikut di mana kami telah menempatkan pernyataan slideToggle()e alert()satu di samping yang lain. Jika Anda mencoba kode ini, peringatan akan muncul segera setelah mengklik tombol sakelar tanpa menunggu efek sakelar slide selesai.
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle("slow");
alert("The slide toggle effect has completed.");
});
});
</script>Dan ini adalah versi modifikasi dari contoh sebelumnya dimana kita menyisipkan pernyataan alert() di dalam fungsi panggilan balik untuk metode ini slideToggle(). Jika Anda mencoba kode ini, pesan peringatan akan muncul setelah efek peralihan slide selesai.
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle("slow", function(){
// Code to be executed once effect is complete
alert("The slide toggle effect has completed.");
});
});
});
</script>Demikian juga, Anda bisa defiselesaikan fungsi panggilan balik untuk metode efek jQuery lainnya, seperti show(), hide(), fadeIn(), fadeOut(), animate(), dll.
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1, p").slideToggle("slow", function(){
// Code to be executed once effect is complete
alert("The slide toggle effect has completed.");
});
});
});
</script>Jika Anda mencoba contoh kode di atas, Anda akan mendapatkan pesan peringatan yang sama dua kali per item <h1> e <p>, setelah mengklik tombol aktifkan.
BlogInnovazione.it
Operasi oftalmoplasti menggunakan penampil komersial Apple Vision Pro dilakukan di Poliklinik Catania…
Mengembangkan keterampilan motorik halus melalui mewarnai mempersiapkan anak untuk keterampilan yang lebih kompleks seperti menulis. Mewarnai…
Sektor angkatan laut adalah kekuatan ekonomi global sejati, yang telah menuju pasar 150 miliar...
Senin lalu, Financial Times mengumumkan kesepakatan dengan OpenAI. FT melisensikan jurnalisme kelas dunianya…