jquery - jquery淡入淡出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它。