jQuery .addClass和.fadeIn？

所以，我有这些链接的h1元素，我想为它们添加一个类，并在元素被盘旋之后淡化该类，然后onMouseOut删除类，同时淡化类。 但是使用淡入淡出function对我没什么用。 看到它隐藏了元素。 有任何想法吗？

jQuery(".categories h1 a").hover( function () { jQuery(this).fadeIn("slow").addClass("active"); }, function(){ jQuery(this).fadeOut("slow").removeClass("active"); }); }); 

谢谢！

编辑：：：

 jQuery("h1").hover(function() { jQuery(this).stop().animate({ backgroundColor: "#a7bf51"}, 800); },function() { jQuery(this).stop().animate({ backgroundColor: "#FFFFFF"}, 800); }); }); 

Answer 1

尝试使用jQuery UI .addClass和.removeClass 。

 $(function() { $(".categories h1 a").hover(function() { $(this).stop(true,true).addClass("active", 500); }, function() { $(this).stop(true,true).removeClass("active", 100); }); }); 

演示 （由于某种原因，它没有第一次正确（褪色）动画..但后来它工作正常）

编辑：已更新以确保完整性。

您还可以使用.animate来获得所需的效果。 见下文，

 $(function() { $(".categories h1 a").hover(function() { $(this).stop().animate({ backgroundColor: "#a7bf51" }, 800); }, function() { $(this).stop().animate({ backgroundColor: "#FFFFFF" }, 800); }); }); 

DEMO

Answer 2

如果您不想使用jquery UI，因为它将是一个额外的负载，您可以执行以下操作：

（当我的应用程序中使用’隐藏’引导类时，对我很有用）

删除课程时缓慢淡入：

 $('.myClass').removeClass('hidden').fadeOut(0).fadeIn(10000) 

慢慢淡出，添加课程然后淡入：

 $('.myClass').fadeOut(1000, function(){ $(this).addClass('hidden'); //or any other class }).fadeIn(10000) 

希望这会简化某人的任务！

Answer 3

听起来你希望类的样式淡入。你应该查看animate（）： http ： //api.jquery.com/animate/

fadeIn简单地淡化元素。

Answer 4

我不认为你可以在类之间交叉淡入淡出，但你可以使用animate函数。 animate允许您在指定时间内影响任何css变量。

http://api.jquery.com/animate/

我知道从css文件中删除了一些样式，但同样，我认为jQuery不会在类之间交叉淡入淡出。

Answer 5

如果加载了jQuery UI库，则可以为toggleClass函数设置一个额外的参数。

通过css设置不透明度。

 h1 a { opacity:0.8; } h1 a.hovered { opacity: 1.0; } 

然后

 jQuery(".categories h1 a").hover(function(e) { $(this).toggleClass('hover', 1000); } 

1000是事件的毫秒计数器。 因此，当在一秒钟内徘徊时，效果应该渐变为1.0不透明度，而在不徘徊时，效果应该在1秒内淡出。

Answer 6

试试这个，这里是jsFiddle（ 在这里输入链接描述 ）：

   
 
Item 1
 
Item 2
 
Item 3
 
​