jQuery的动画（）backgroundPosition工作不细

我有这个简单的HTML：jQuery的动画（）backgroundPosition工作不细

<span class="coverImg" style="background-image:url('images/show2.jpg');"></span></a>

和一些JavaScript：

$(function() { 
      $(".coverImg").hover(function() { 
       $(this).animate({ 
        backgroundPosition : "0 0" 
       }, "fast"); 
      }, function() { 
       $(this).animate({ 
        backgroundPosition : "50% 50%" 
       }, "fast"); 
      }); 
     });

所以，当鼠标悬停功能是正常的工作，虽然动画也不是那么几乎没有看到完美的画面和缓动。但是当mouseout功能不起作用时，背景图片就坐在那里，即使在像素上也不动...

Wha问题是什么？我错过了什么？

OR：

$(function() { 
      $(".coverImg").mouseover(function() { 
       $(this) 
       .animate({ 
        "background-position-x" : "-=20px", 
        "background-position-y" : "-=20px" 
       }, "fast"); 
      }).mouseout(function() { 
       $(this).animate({ 
        "background-position-x" : "0 ", 
        "background-position-y" : "0" 
       }, "fast"); 
      }) 
     })

这仅适用于Chrome浏览器...

所以再有什么问题！有什么错误！我有什么想念？

来源

2012-01-18 Lien

请发表您的解决方案下面，然后选择“接受”自己的答案。这是在这里回答你自己的问题最正确的方式。 – Sparky 2012-01-18 19:07:24

哦，我明白了，第一次原谅我，实际上我错了我自己的解决方案.... – Lien 2012-01-18 19:12:23

我不认为jQuery的可以动画背景的位置是默认的 - 我用http://archive.plugins.jquery.com/project/backgroundPosition-Effect

标准的CSS不支持background-position-x和background-position-y，只有少数支持这一Chrome等。

而jQuery的animate()方法不支持在同一时间动画两个值，它会在某个时候变成错误，或者在某些浏览器中不做任何事情。

因此，毕竟，检查了这一点http://snook.ca/archives/javascript/jquery-bg-image-animations。应该有一个名为jQuery.bgpos.js的jQuery插件，如果要为背景位置设置动画效果非常好。

代码是这样的：

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

    } 
});})(jQuery);

来源

2012-01-18 18:29:28 circusdei

谢谢！我会检查这一点。我发现了另一种解决问题的方法，请查看我的编辑！这对我来说可以！ – Lien 2012-01-18 18:59:25

我刚刚发现这只适用于Chrome，即使不是Firefox ...这必须是一个错误.... – Lien 2012-01-18 19:02:29

演示：http：//www.protofunc.com/scripts/jquery/backgroundPosition/工作在Firefox中.. 。确保这一行：“background-position-x”：“0”符合示例。 – circusdei 2012-01-18 19:20:58

好像你正在使用jQuery的一个重手的方法。

span { 
    background: url(yourimage.jpg) top left no-repeat; 
    transition: all 3s ease-in-out; 
} 

span:hover { 
    background-position: 50% 50%; 
}

背景位置变化将在现代浏览器中的动画和将只是在IE8下一个静态的变化：这可以用单独的CSS来完成。

您可能需要添加其他浏览器的transition属性的特定前缀版本，以及：

-webkit-transition: 
-moz-transition: 
-o-transition: 
transition:

来源

2012-01-18 19:06:42

谢谢！ -o-transition代表Opera，对吧？我的意思是它应该在歌剧中运行良好，但它不是，它是有线的......并且IE9也不支持这么好。铬和FF工作真的很好...我可能有其他错误？ – Lien 2012-01-18 19:38:01

我认为-e-transition：适用于IE9 – circusdei 2012-01-18 20:19:42

jQuery的动画（）backgroundPosition工作不细

回答

相关问题