動畫背景位置不工作

我想動畫背景位置，但不工作。這是可能的，以動畫這個動畫背景位置不工作

<head> 
    <style> 
     .test{ background:#F00} 
    </style> 
    <script type="text/javascript" src="jquery-1.8.3.js"></script> 
    <script type="text/javascript"> 
     $(function(){ 
      $('a').click(function(){ 
       $(this).animate({backgroundPosition:'-50px 10px'}, 200); 
      }); 
     }); 
    </script> 
</head> 

<body> 
    <a href="javascript:void(0)">click</a> 
    <div>check....</div> 
</body>

來源

2013-05-27 Carlos

[animate backgroundPosition]的可能重複（http://stackoverflow.com/questions/6380904/animate-backgroundposition） –

你使用任何插件？ –

對於它的價值，GSAP可以以獨立形式處理這個問題，或者您可以加載它的jQuery插件並且上面的代碼可以正常工作（不需要特殊的修復，因爲花哨的步法是在引擎蓋下完成的，包括與舊IE的風味）。 http://www.greensock.com/gsap-js/ – Jack

如果檢查jQuery animate page你可以讀到：

動畫

所有動畫屬性s應該被動畫成一個數字值，除非如下所述;大多數非數字屬性不能使用基本的jQuery功能進行動畫（例如，除非使用jQuery.Color（）插件，否則寬度，高度或左側可以是動畫，但背景色不可以）。

這就是說，背景位置使用2個值。解決方案是拼接值。

這裏是如何*：

$(this).animate({ 
    'background-position-x' : '-50px', 
    'background-position-y' : '10px' 
}, 200);

*我可能已經反轉的2個值，我從來不記得至極一個是x和至極一個是y。

編輯

由於Firefox的犯規支持background-position-x和y，這裏的代碼來解決這個問題：

var pos = {x : '', y : ''}; 
$('a').click(function(){ 
    var that = $(this); 
    that.animate({ 
     'background-position-x' : '-50px', 
     'background-position-y' : '10px' 
    },{ 
     duration : 200, 
     step : function(a,b){ 
     if(b.prop == "backgroundPositionX"){ 
      pos.x = a + b.unit 
     }else if(b.prop == "backgroundPositionY"){ 
      pos.y = a + b.unit 
     } 
     }, 
     progress : function(){ 
     that.css('background-position', pos.x + ' ' + pos.y); 
     } 
    }); 
});

來源

2013-05-27 13:53:21

它不適用於mozilla – Carlos

是的，Firefox不支持它，但我修好了，看看！ –

嗨，它不是在Firefox中工作。但我想現在什麼是.unit用於什麼，它會給予什麼價值 – Carlos

Working jsFiddle Demo

我認爲jQuery的不能動畫background-position。一種解決方案，使用過渡，在CSS：

a { 
    -webkit-transition: background-position 0.6s; 
    -moz-transition: background-position 0.6s; 
    -ms-transition:  background-position 0.6s; 
    -o-transition:  background-position 0.6s; 
    transition:   background-position 0.6s; 
}

而只是改變jQuery中的background-position與.css()方法：

$(function(){ 
    $('a').click(function(){ 
     $(this).css('background-position', '250px 250px'); 
    }); 
});

來源

2013-05-27 13:53:11

我忘了我碰到這個地方來了，但這裏是一個小哈巴狗在訣竅相當好：

(function($){$.extend($.fx.step,{backgroundPosition:function(c){if(c.state===0&&typeof c.end=='string'){var d=$.curCSS(c.elem,'backgroundPosition');d=toArray(d);c.start=[d[0],d[2]];var e=toArray(c.end);c.end=[e[0],e[2]];c.unit=[e[1],e[3]]}var f=[];f[0]=((c.end[0]-c.start[0])*c.pos)+c.start[0]+c.unit[0];f[1]=((c.end[1]-c.start[1])*c.pos)+c.start[1]+c.unit[1];c.elem.style.backgroundPosition=f[0]+' '+f[1];function toArray(a){a=a.replace(/left|top/g,'0px');a=a.replace(/right|bottom/g,'100%');a=a.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");var b=a.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);return[parseFloat(b[1],10),b[2],parseFloat(b[3],10),b[4]]}}})})(jQuery);

並在使用中：

$(function(){ 
    $('a').click(function(){ 
     $(this).animate({backgroundPosition: "(-50px 10px)"}, 200); 
    }); 
});

來源

2013-05-27 19:05:22 faino

動畫背景位置不工作

回答

相關問題