Selamat datang ke BelajarBlogs...
Home » , » Tambah JQuery Fade Effect

Tambah JQuery Fade Effect



Tutorial ini memang menarik,apabila anda arah tetikus anda ke gambar tersebut nanti dia jadi macam ada putih sikit.


Langkah 1 (Cari kode)


  • Design > Edit html > ctrl+f
  • Selepas itu cari </head>

Langkah 2 (Masukkan kode)


Masukkan kode dibawah ini,diatas kode yang anda cari tadi.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(".post img").fadeTo("slow", 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".post img").hover(function(){
$(this).fadeTo("slow", 0.5); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(".latest_img").fadeTo("slow", 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".latest_img").hover(function(){
$(this).fadeTo("slow", 0.5); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>

  • Selepas itu anda perlu klik Save Template
  • Sekarang anda boleh lihat hasilnya.

0 comments:

Blogger Tricks And TipsComment here