我的 jquery 动画功能不起作用答案

【问题标题】：my jquery animation function not working我的 jquery 动画功能不起作用
【发布时间】：2012-02-03 06:57:19
【问题描述】：

当用户将鼠标悬停在按钮上时，我正在尝试使用 jquery animate 函数更改按钮箭头图像，但它不起作用。这是我的code，这是我的脚本。

$('.Button').mouseenter(function(){  
   $('.arrow-image').animate({  
       'background-image':'url(images/sp-images.png)',  
       'background-repeat':'no-repeat', 
       'background-position':'-85px -0px'
    },5000);  
});

【问题讨论】：

您已经发布了 29 个其他问题，您现在应该可以可靠地应用代码格式。询问/编辑问题时，请参阅文本区域右侧显示的如何格式化框，以及其上方的[?]链接。
另外：实时链接（到jsbin.com 或jsfiddle.net）是您问题的一个很好的附加，但始终包含相关代码/标记in问题本身。为什么：meta.stackexchange.com/questions/118392/…
我不相信 background-image 和 background-repeat 是你可以制作动画的东西，因为它们没有开始和结束的值——它们只有一个值。你到底想完成什么？
只是慢慢改变箭头图像

标签： jquery css jquery-animate

【解决方案1】：

希望，这段代码会有所帮助。我知道，您出于某种目的使用了背景图像，但我试图通过其他方式使事情按预期工作。 :) 这是我尝试使箭头动画！

进行了一项更改 - 我使用了 img 标签，而不是使用背景图片。

在这里查看：http://jsfiddle.net/ylokesh/HvdZP/1/

【讨论】：

【解决方案2】：

你的'背景位置'：'-85px -0px'，把它改成

'background-position-x':'-85px',
'background-position-y':'0px'

【讨论】：

【解决方案3】：

XepterX 是对的： http://jsfiddle.net/YSGYz/7/

【讨论】：

【解决方案4】：

来自jQuery documentation for .animate()：

动画属性和值所有动画属性都应该是动画到一个单一的数值，除非如下所述；最多非数字属性无法使用基本 jQuery 进行动画处理功能（例如，宽度、高度或左侧可以设置动画，但 background-color 不能，除非使用了 jQuery.Color() 插件）。除非另有说明，否则属性值被视为像素数指定的。如果适用，可以指定单位 em 和 %。

从此可以看出，您无法为新图像或重复值设置动画。您可以为数字样式属性和一些其他数字属性设置动画。这就是 jQuery .animate() 的工作原理。

如果你想慢慢地从一个图像转换到另一个图像，那么你需要两个对象，一个是可见的，是旧的图像，一个是不可见的，是新的图像。您使用 CSS 使两个对象完全重叠。然后您可以在新图像上使用.fadeIn()，在旧图像上使用.fadeOut()。

正如 XepterX 所示，background-position-x 和 background-position-y 由单个数字表示，因此它们可以动画，但图像 URL 或重复值不能动画。

【讨论】：