jQuery Animate对我不起作用

Question

我为动画背景鼠标悬停创建了此代码，但是它不起作用，仅更改其他背景的背景，但在使用animate函数时不显示效果：

$(".b_header").mouseover(function() {

$(this).css("background-image","url(images/bot/head_down.png)");



/*

Also I've tried other effects and nothing 

$(this).css( {backgroundPosition: "0 0"} );


$(this).animate(
{backgroundPosition:"(-20px -53px)"}, 
{duration:500});
*/

$(this).animate({ opacity: 5 }, 3000);

});

Answer 1

首先 ，请确保您已使用document.ready

$(document).ready(function() {
     ......
     $(this).animate({ opacity: 1 }, 3000);
});

其次 ，确保您的CSS文件中设置了跨浏览器的opacity属性

opacity: 0; /* Chrome 4+, FF2+, Saf3.1+, Opera 9+, IE9, iOS 3.2+, Android 2.1+ */
filter: alpha(opacity=0); /* IE6-IE8 */

最后 ，不透明度值的范围从0（隐藏）到1（不透明），没有NO 5值，但可以正常工作，好像是1

这是一个工作示例=> http://jsfiddle.net/abdullahdiaa/PxGwz/

Answer 2

jQuery的动画功能不适用于带有多个值的CSS属性。 通常，您可以分别为每个单独的值设置动画。 因此，这可以解释为什么尝试对两个背景位置值进行动画处理都行不通。

从.animate()的jQuery文档中 ：

所有动画属性均应设置为单个数值，

要设置不透明度动画效果，需要从0到1的值，而不是5的值，并且要查看具有不透明度的动画作品，对象必须以与要设置动画效果不同的不透明度开始。

这是一个动画不透明度的工作示例： http : //jsfiddle.net/jfriend00/zCL7S/