小 春 日 和

<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript" src="jquery.backgroundPosition.fixed.js"></script>

<style type="text/css">
div {
  width: 90px;
  height: 90px;
  padding: 5px;
  background: url(bg.png) no-repeat 0 -100px;
}
</style>

<script type="text/javascript">
$(function() {
$('div').hover(function(){
$(this).stop().animate({
backgroundPosition: "0 0"
});
}, function(){
$(this).stop().animate({
backgroundPosition: "0 -100px"
});
});
});
</script>

如果要實現此參數動畫

若使用jquery-1.6(含)版本 +  jquery.backgroundPosition.fixed.js 就可以用瞜!

詳細改的內容: 請看我

其他操控動畫參數:

$(this).animate({
    width: "70%",
    opacity: 0.4,
    marginLeft: "0.6in",
    borderWidth: "10px"
}, 500 );

$(this).animate({  backgroundPositionY: '100px', backgroundPositionX: '100px'} );

css參數backgroundPositionX與backgroundPositionY

在Chrome可以有動畫，但在FF和Opera沒有支援此寫法

所以從jquery1.6開始的版本之後都無法使用此功能

下載其他jQuery版本