Metode fadeIn() dan fadeOut()
Kalian dapat menggunakan metode jQuery fadeIn() dan fadeOut() untuk menampilkan atau menyembunyikan elemen HTML dengan secara bertahap menambah atau mengurangi opacitynya.
<script type="text/javascript">
$(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, kalian dapat menentukan parameter kecepatan atau durasi untuk metode fadeIn() dan fadeOut() untuk mengontrol berapa lama animasi fading akan berjalan. Durasi dapat ditentukan baik menggunakan salah satu string yang telah ditentukan ‘slow’ atau ‘fast’, atau dalam beberapa milidetik; nilai yang lebih tinggi menunjukkan animasi yang lebih lambat.
<script type="text/javascript">
$(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>
Catatan: Metode efek fadeIn() / fadeOut() terlihat mirip dengan show() / hide(), tetapi tidak seperti metode show() / hide(), metode fadeIn() / fadeOut() hanya menganimasikan opacity dari target elemen dan tidak menghidupkan dimensi mereka.
Kalian juga dapat menentukan callback function yang akan dieksekusi setelah metode fadeIn() atau fadeOut() selesai.
<script type="text/javascript">
$(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>
Metode fadeToggle()
Metode jQuery fadeToggle() menampilkan atau menyembunyikan elemen yang dipilih dengan meng-animasikan opacity mereka sedemikian rupa sehingga jika elemen tersebut awalnya ditampilkan, itu akan fade out; jika disembunyikan, itu akan fade in (mis. mengaktifkan efek fading).
<script type="text/javascript">
$(document).ready(function(){
// Toggles paragraphs display with fading
$(".toggle-btn").click(function(){
$("p").fadeToggle();
});
});
</script>
Demikian pula, kalian dapat menentukan parameter durasi untuk metode fadeToggle() seperti metode fadeIn() / fadeOut() untuk mengontrol durasi atau kecepatan fade animasi toggle.
<script type="text/javascript">
$(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>
Demikian pula, kalian juga dapat menentukan callback function untuk metode fadeToggle().
<script type="text/javascript">
$(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>
Metode fadeTo()
Metode jQuery fadeTo() mirip dengan metode .fadeIn(), tetapi tidak seperti .fadeIn(), metode fadeTo() memungkinkan kalian meng-fade in elemen ke tingkat opacity tertentu.
$(selector).fadeTo(speed, opacity, callback);
Parameter opacity yang diperlukan menentukan opacity akhir dari elemen target yang dapat berupa angka antara 0 dan 1. Parameter durasi atau kecepatan juga diperlukan untuk metode ini yang menentukan durasi fade to animation.
<script type="text/javascript">
$(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>