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

终于，不透明度值范围从0（隐藏）到1（不透明），没有5值，但它会正常工作，就好像它是1

这是一个有效的例子=＆gt; http://jsfiddle.net/abdullahdiaa/PxGwz/

Answer 2

jQuery的animate函数不适用于具有多个值的CSS属性。您通常可以单独为每个单独的值设置动画。因此，这可以解释为什么尝试为背景位置的两个值设置动画都不起作用。

来自jQuery doc for .animate()：

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

对于动画不透明度，它取0到1之间的值，而不是值5，并且要查看具有不透明度的动画效果，对象必须以不同于您动画的不透明度开始到。

以下是动态不透明度的工作示例：http://jsfiddle.net/jfriend00/zCL7S/

Jquery Animate对我不起作用

2 个答案: