动画背景位置不工作

我想动画背景位置，但不工作。这是可能的，以动画这个动画背景位置不工作

<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

动画背景位置不工作

回答

相关问题