Fade jQuery

Indonesia version
English version

INDONESIA

FadeOut function

Metode fadeout () secara bertahap mengubah opacity, untuk elemen yang dipilih, dari terlihat hingga tersembunyi (efek memudar).

Elemen tersembunyi tidak akan ditampilkan sama sekali.

Durasi waktu dapat diberikan dalam milidetik untuk menentukan berapa lama animasi akan berjalan.


<input type="button" id="btni" value="fadeOut">
 <div id="d1i" style="background:red;width:100px;height:100px">This is the Div</div>
<script src="js/jquery-2.2.0.min.js"></script>
<script>
$(document).ready(function()
{
$("#btni").click(function()
{
$("#d1i").fadeOut(2000); //5seconds
   });
});
</script>

This is the Div

FadeIn function

Metode fadein () secara bertahap mengubah opacity, untuk elemen yang dipilih, dari tersembunyi untuk terlihat.

Elemen harus disembunyikan sebelum menggunakan fungsi ini, itu satu-satunya cara kita dapat memberi tahu perubahan.

Durasi waktu dapat diberikan dalam milidetik untuk menentukan berapa lama animasi akan berjalan.


<input type="button" id="btn2i" value="fadeIn">
<div id="d2i" style="background:grey;width:100%;height:100px">This is the Div</div>
<script src="js/jquery-2.2.0.min.js"></script>
<script>
$(document).ready(function()
{
$("#btn2i").click(function()
{
$("#d2i").hide(); //If you not hide it you can't able to see the changes
    $("#d2i").fadeIn(2000); //2seconds
   });
});
</script>

This is the Div

FadeToggle function

Metode fadetoggle () mengubah antara fadein () dan fadeout () metode.

Jika elemen-elemennya memudar, fadetoggle () akan memudar mereka.

Durasi waktu dapat diberikan dalam milidetik untuk menentukan berapa lama animasi akan berjalan.


 <input type="button" id="btn3i" value="fadeToggle">
 <div id="d3i" style="background:grey;width:100%;height:100px">This is the Div</div>
<script src="js/jquery-2.2.0.min.js"></script>
<script>
$(document).ready(function()
{
$("#btn3i").click(function()
{
$("#d3i").fadeToggle(2000); //2seconds
   });
});
</script>

This is the Div

FadeTo function

Metode fadeto () secara bertahap mengubah opacity, untuk elemen yang dipilih, ke opacity tertentu (efek memudar).

Durasi waktu dan opacity yang ditentukan harus diberikan pada milidetik untuk menentukan berapa lama animasi akan berjalan.


 <input type="button" id="btn4" value="fadeTo">
 <div id="d4" style="background:grey;width:100%;height:100px">This is the Div</div>
<script src="js/jquery-2.2.0.min.js"></script>
<script>
$(document).ready(function()
{
$("#btn4").click(function()
{
$("#d4").fadeTo(2000, 0.2); //2seconds
   });
});
</script>

This is the Div

ENGLISH

FadeOut function

The fadeOut() method gradually changes the opacity, for selected elements, from visible to hidden (fading effect).

Hidden elements will not be displayed at all.

The time duration can be given in milliseconds to determine how long the animation will run.


<input type="button" id="btn" value="fadeOut">
 <div id="d1" style="background:red;width:100px;height:100px">This is the Div</div>
<script src="js/jquery-2.2.0.min.js"></script>
<script>
$(document).ready(function()
{
$("#btn").click(function()
{
$("#d1").fadeOut(2000); //5seconds
   });
});
</script>

This is the Div

FadeIn function

The fadeIn() method gradually changes the opacity, for selected elements, from hidden to visible.

The element should be hidden before using this function, it is the only way we can notify the changes.

The time duration can be given in milliseconds to determine how long the animation will run.


<input type="button" id="btn2" value="fadeIn">
<div id="d2" style="background:grey;width:100%;height:100px">This is the Div</div>
<script src="js/jquery-2.2.0.min.js"></script>
<script>
$(document).ready(function()
{
$("#btn2").click(function()
{
$("#d2").hide(); //If you not hide it you can't able to see the changes
    $("#d2").fadeIn(3000); //3seconds
   });
});
</script>

This is the Div

FadeToggle function

The fadeToggle() method toggles between the fadeIn() and fadeOut() methods.

If the elements are faded out, fadeToggle() will fade them in.

If the elements are faded in, fadeToggle() will fade them out.

The time duration can be given in milliseconds to determine how long the animation will run.


 <input type="button" id="btn3" value="fadeToggle">
 <div id="d3" style="background:grey;width:100%;height:100px">This is the Div</div>
<script src="js/jquery-2.2.0.min.js"></script>
<script>
$(document).ready(function()
{
$("#btn3").click(function()
{
$("#d3").fadeToggle(2000); //2seconds
   });
});
</script>

This is the Div

FadeTo function

The fadeTo() method gradually changes the opacity, for selected elements, to a specified opacity (fading effect).

The time duration and the specified opacity should be given in milliseconds to determine how long the animation will run.


 <input type="button" id="btn4" value="fadeTo">
 <div id="d4" style="background:grey;width:100%;height:100px">This is the Div</div>
<script src="js/jquery-2.2.0.min.js"></script>
<script>
$(document).ready(function()
{
$("#btn4").click(function()
{
$("#d4").fadeTo(2000, 0.2); //2seconds
   });
});
</script>

This is the Div