標題：清單中背景出現動畫 jQuery Background Position
出處：A.PAO designSTUDIO BLOG
時間：Wed, 01 Feb 2012 11:44:35 +0000
作者：apao
地址：https://blog.apao.idv.tw/post/868/

內容：

點擊在新視窗中瀏覽此圖片
https://blog.apao.idv.tw/attachment.php?fid=1372


<style>  
ul {list-style:none;margin:0;padding:0;}
li {float:left;width:100px;line-height:25px;height:25px;margin:0;padding:0;text-align:center;}
li a {background:url(背景圖片) repeat 0 0;display:block;padding:5px 10px;color:#FFF;text-decoration:none;border-right:1px solid #FFF;}
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.bgpos.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('li a')
    .css( {backgroundPosition: "-20px 35px"} ) //デフォルト時、背景画像を横-20px、縦35pxに指定。
    .mouseover(function(){
      $(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})
      //マウスオーバー時に縦位置94pxに0.5秒かけて移動
    })
    .mouseout(function(){
      $(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:200, complete:function(){
      //マウスアウト時に横位置40px、縦位置35pxに2秒かけて移動
        $(this).css({backgroundPosition: "-20px 35px"})
        //移動完了後、元の位置に戻す
      }})
  })
});
</script>


html中放置
<ul id="demo">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>



備註：詳細可參考demo中CSS ID+Script的作法，可分好幾種動畫。

  $('#a 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"})
      }})
    })


出處：
http://snook.ca/technical/jquery-bg/

參考:
http://www.skuare.net/test/jBgpos.html

demo:
http://apao.zapto.org/~apao/jQuery/Background_Position/



Generated by Bo-blog 2.1.1 Release