+==xXx(EXPLORATION)Xx==+==x

Home » Tips Blogger » jQuery Background Animation Top Down effect

jQuery Background Animation Top Down effect

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/AVvXsEiQWoY9LlvOpYbqyVUnmO4dv2DvrhBo3FnWCItEcnmGYOGWu8ccyljSaEFJWSn8ftEoeQ40OO6wKhHXVkvGVIYnFLe5_oYhM_mMV6NLRfCrBuBcc0uon6u_iXczJWgXhRXHmt3iycYLgag/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 anda) :

<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>