Jquery Animate 不适合我

Posted 2023-05-08

【中文标题】Jquery Animate 不适合我

【英文标题】：Jquery Animate does not work for me

【发布时间】：2012-08-01 19:16:20

【问题描述】：

我为动画背景鼠标悬停创建了这段代码，但它不起作用，只会改变另一个背景，但在我使用函数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);

);

【问题讨论】：

jquery animate background position的可能重复

opacity 从0（透明）变为1（不透明）

【参考方案1】：

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

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

second，在你的 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（不透明），没有 5 值但它会像 1 一样正常工作

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

【参考方案2】：

jQuery 的 animate 函数不适用于采用多个值的 CSS 属性。您通常可以单独为每个单独的值设置动画。所以，这就解释了为什么尝试为 background-position 的两个值设置动画是行不通的。

来自jQuery doc for .animate()：

所有动画属性都应动画为单个数值，

对于 opacity 动画，它的值是 0 到 1，而不是 5到。

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

【讨论】：

和动画背景图像？ ，我想这样做，但我不知道在函数 jquery css 之前它是否使用了问题，并且这不起作用？

@Fran - 如何为背景图像设置动画？