Contoh fadeIn fadeOut dan fadeTo jQuery

membuat efek fadein fadeout fadeto jquery
fadein fadeout fadeto

jQuery hadir dengan tiga metode yang berguna untuk menciptakan efek fading dengan mudah.

  •      fadeIn () – Menampilkan elemen yang ingin dtampilkan.
  •      fadeOut () – Sembunyikan elemen  dengan efek  fade out.
  •      fadeTo () – Memudar elemen yang diberikan dengan opacity tertentu.

Nah dalam effect fadeIn fadeOut dan fadeOut terdapat pengaturan durasi yaitu slow, fast, dan tepat milidetik. Jika parameter ini dihilangkan, default 400 milidetik adalah berlaku. Efek fadeIn dan fadeOut jQuery banyak digunakan untuk menampilkan/menghilangkan gambar atau teks pada web kita. Okee, langsung saja kita coba kode sederhana membuat efek fadeIn, fadeOut, dan fadeTo pada jQuery:

<html>
<head>
<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<style type=”text/css”>
.fadeOutbox, .fadeInbox, .fadeTobox{
float:left;
padding:8px;
margin:16px;
border:1px solid red;
width:200px;
height:50px;
background-color:#000000;
color:white;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<h1>jQuery fadeIn(), fadeOut() and fadeTo() example</h1>
<div>
<h3>fadeOut() example</h3>
<div>
Click me – fadeOut()
</div>
<div>
Click me – fadeOut()
</div>
</div>
<div>
<h3>fadeIn() example</h3>
<div>
Click me – fadeIn()
</div>
<div>
Click me – fadeIn()
</div>
</div>
<div>
<h3>fadeTo() example</h3>
<div>
Click me – fadeTo()
</div>
<div>
Click me – fadeTo()
</div>
</div>
<div>
<button id=reset>Reset</button>
</div>
<script type=”text/javascript”>
$(“.fadeOutbox”).click(function () {
$(this).fadeOut(‘slow’);
});
$(“.fadeInbox”).click(function () {
$(this).hide().fadeIn(2000);
});
$(“.fadeTobox”).click(function () {
$(this).fadeTo(‘fast’,0.2);
});
$(“#reset”).click(function(){
location.reload();
});
</script>
</body>
</html>

Semoga sharing membuat efek fadeIn, fadeOut, dan fadeTo ini membawa manfaat. Amin…

About Ganang Julianto 253 Articles
Si Anak dari Orang Tua tersayang ingin berbagi ilmu dengan harapan bermanfaat bagi orang lain. Situs SeputarTI.Com ini sebagai salah satu media berbagi saya, khususnya dibidang TI. Salam Kenal dari saya... :-)

Be the first to comment

Leave a Reply

Your email address will not be published.


*