爲什麼jQuery的backgroundPosition動畫函數跳躍而不是動畫？

我試圖創建3個按鈕（圖像是背景圖像），在進行鼠標懸停時進行平滑動畫。爲什麼jQuery的backgroundPosition動畫函數跳躍而不是動畫？

當我使用下面的html，css和js時，結果是一個jquery動畫，其中的動畫只是跳轉到結果而不是創建一個平滑的動畫。

查看結果在：http://infinitize.com，目前只有第一個按鈕是動畫。

CSS：

/*-- HOMEPAGE --*/ 
#buttons {margin-top:60px;} 
#buttons a {display:inline-block;width:160px;border-bottom:none;color:#4b4f52;text-shadow:0 1px 0 #fff;font-size:20px;padding-top:180px;text-align:center;} 
.bg-img-home {background:transparent url(<r:assets:url title="bg-img-home" />) no-repeat;} 
#webdesign {background-position:0px 0px;}

HTML：

<div id="buttons" class="span-24 last"> 
    <div class="span-3">&nbsp;</div> 
    <div id="webdesign" class="span-5 bg-img-home"><a href="#" id="jump-webdesign">WebDesign<br />Web Development</a></div> 
    <div class="span-2">&nbsp;</div> 
    <div id="ecommerce" class="span-5 bg-img-home"><a href="#" id="jump-ecommerce">E-Commerce Solutions</a></div> 
    <div class="span-2">&nbsp;</div> 
    <div id="openbravo" class="span-5 bg-img-home"><a href="#" id="jump-openbravo">OpenBravo<br />ERP/POS solutions</a></div> 
    <div class="span-2 last">&nbsp;</div> 
</div>

腳本：

$(document).ready(function(){ 
    $("#jump-webdesign").hover(function(){ 
      $("#webdesign") 
      .animate({backgroundPosition: '0px -10px'},200).animate({backgroundPosition:'0px 0px'},200) 
    }); 
});

來源

2010-03-30 Michael Torfs

出現在Chrome瀏覽器正常工作，請嘗試從200ms的正在增加你的持續時間，以類似1500毫秒高得多，看看結果。 – 2010-03-30 19:07:11

這是我的答案，它在Chrome中也做了同樣的事情。 – 2010-03-30 19:09:01

好吧，改爲1500ms，它跳躍，而不是在FF3.6.2這裏的動畫 – 2010-03-30 19:10:03

設置你的生命的時間更長一些，200毫秒是非常快的。

基於您的評論，嘗試動畫上邊距：

$("#jump-webdesign").hover(
    function() { 
     $(this).children("#webdesign").animate({ 
      marginTop: "-10px" 
     }, 500); 
    }, 
    function() { 
     $(this).children("#webdesign").animate({ 
      marginTop: "0px" 
     }, 500); 
    } 
);

來源

2010-03-30 19:05:32

好吧，改爲1500ms，它跳躍，而不是動畫在這裏FF3.6.2 – 2010-03-30 19:10:31

檢查我的更新 – 2010-03-30 19:14:55

爲什麼jQuery的backgroundPosition動畫函數跳躍而不是動畫？

回答

相關問題