0

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

});
4

2 回答 2

4

首先，确保你已经使用了 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 一样正常工作

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

于 2012-08-03T18:02:49.580 回答
1

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

来自jQuery 文档.animate()：

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

对于opacity的动画，它的取值范围是 0 到 1，而不是 5，并且要查看使用 opacity 的动画，对象必须以不同于您制作动画的不透明度开始。

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

于 2012-08-03T17:54:38.580 回答