- Login blogger
- Rancangan, Edit Html, Cari kode ]]></b:skin>
- Dan Simpan kode berikut diatasnya :
/* ---------------
jQuery Background Top down effect
---------------------------------- */
#topd {
list-style:none;
margin:0;padding:0;}
#topd li {
float:left;
width:100px;
margin:0;
padding:0;
text-align:center;
}
#topd li a {
display:block;
padding:5px 10px;
height:100%;
color:#FFF;
text-decoration:none;
border-right:1px solid #FFF;
}
#topd li a:hover, li a:focus, li a:active {
background-position:-150px 0;
}
#topd a {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFwO4kRyHzkZZlHbfR-Xpexd5jWcdMvkG7tR48PiZ6J2XmcnByVG8Lapl2JJ4c-LX0TpLuU5U76Kn5CQQUplQ73WHZXRWFLtkWT00Fn4DaD5_nsGcBpXGwhem-wKLBJN05dc0MRWgksEQ/s1600/bg.jpg) repeat -20px 35px;
}
selanjutnya simpan script berikut diatas kode </head>:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://kangdadang.googlecode.com/files/jquery.bgpos.js' type='text/javascript'/>
<script type='text/javascript'>
$(function(){
$('#topd a')
.css( {backgroundPosition: "-20px 35px"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:200, complete:function(){
$(this).css({backgroundPosition: "-20px 35px"})
}})
})
});
</script>
terakhir cara pemanggilannya pada Html atau pada template kalau saya biasa diletakkan di bawah tag <div id='head-nav'> (sesuaikan dengan template kawan) :
<ul id="topd">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Tutorial</a></li>
</ul>
selesaii... jangan lupa simpan template...
Semoga berhasil dengan tutor jquery ini, karena memang terkadang penerapan jquery selalu terjadi bentrok dsb... :)
Responses
0 Respones to "jQuery Background Animation Top down effect"
Post a Comment
Terima kasih telah membaca dan berkomentar jQuery Background Animation Top down effect, .