jQuery .addClass和.fadeIn？

Question

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

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);
    });    
});

DEMO(由于某种原因,它第一次没有正确设置(淡入淡出)..但是之后它可以正常工作)

编辑:已更新以确保完整性.

您还可以使用它.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)

希望这可以简化某人的任务！