jquery fadein addClass

Question

我正在使用jQuery将类应用于悬停元素，即addClass('active')

该类添加了边框并更改了背景颜色，但我希望这些更改能够淡化，而不仅仅是打开或关闭。

这是否可以使用jQuery，即添加一个类并让类添加的效果消失？

Answer 1

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

$(function() {
    $("div.className").hover(function() {
        $(this).stop(true,true).addClass("active", 500);
    }, function() {
        $(this).stop(true,true).removeClass("active", 100);
    });    
});

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

请注意，您需要jQueryUI才能生效。

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

});

Answer 2

如果使用jQueryUI，这将在http://api.jqueryui.com/addClass/中构建，如果没有，我会做的是从类中提取所有属性并逐个动画。

Answer 3

如果.animate()函数对你不利（因为你有图像背景或某些东西），也许是一个很好的解决方案。

创建具有相同内容和新类的div元素。将新div放在您的元素上，然后fade in。