jQuery .addClass 和 .fadeIn？答案

【问题标题】：jQuery .addClass and .fadeIn?jQuery .addClass 和 .fadeIn？
【发布时间】：2012-05-03 21:05:06
【问题描述】：

所以，我有这些 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);
      });
});

【问题讨论】：

请澄清一下，你想淡入什么？您是否希望将鼠标悬停在 h1 上的链接淡入？您的代码将淡出，如果它有效，只会将链接淡出，但您将无法再次淡入。
没有。我想淡入添加到 h1>a 标签的类。然后在鼠标退出时淡出
@AaronBrewer 见 >>jsfiddle.net/NLChW/4
@Vega: squaredcube.com/beta 不工作。
@AaronBrewer 您需要在页面中包含 jQuery UI 库。尝试在您的页面中包含<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>，它应该可以工作。

标签： javascript jquery html dom

【解决方案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

【讨论】：

这是一种有趣的方式。在下面查看我的答案，我觉得它更干净。您是否有理由使用停止功能和 addClass 而不是切换？
@ChristopherMarshall .stop 的原因是停止淡入淡出过渡，否则快速悬停在多个链接上将同时显示多个动画。好吧，当您有更长的持续时间（1000 毫秒）时，您将能够看到它
有趣，感谢您的解释！我不应该对用户的鼠标速度做出假设哈哈。

【解决方案2】：

如果您不想使用 jquery UI，因为它会增加额外的负载，您可以执行以下操作：

（在我的应用中使用“隐藏”引导类时对我很有用）

在移除类时慢慢淡入：

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

慢慢淡出，添加类然后淡入：

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

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

【讨论】：

【解决方案3】：

听起来您希望类的样式淡入。您应该为此查看 animate()：http://api.jquery.com/animate/

fadeIn 只是淡入元素。

【讨论】：

好吧，我尝试使用这个 Animate 功能，但现在似乎无法让它工作...查看更新的问题。

【解决方案4】：

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

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

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

【讨论】：

好吧，我尝试使用这个 Animate 功能，但现在似乎无法让它工作...查看更新的问题。

【解决方案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 秒内淡出。

【讨论】：

这就是为什么我说“如果你加载了 jQuery UI 库”。 ;}

【解决方案6】：

试试这个，这里是 jsFiddle (enter link description here)：

<script type="text/javascript">
    jQuery(".categories h1").hover(function () {
            jQuery(this).stop().animate({ "background-color": "#a7bf51"}, 800);
            jQuery(this).addClass("active");
            jQuery(this).find("a").fadeIn("slow");
        },
        function() {
            jQuery(this).stop().animate({ "background-color": "#FFFFFF"}, 800);
            jQuery(this).addClass("active");
            jQuery(this).find("a").fadeOut("slow");
    });
</script>
<style type="text/css">
    .categories h1 {
        background-color: rgb(200, 200, 200);
        display: block;
        padding: 5px;
        margin: 5px;
        width: 100px
    }
    .categories h1 a {
        display: none;
    }
</style>
<div class="categories">
    <h1><a href="#">Item 1</a></h1>
    <h1><a href="#">Item 2</a></h1>
    <h1><a href="#">Item 3</a></h1>
</div>

【讨论】：