Question

有时，通过添加设置display: none的CSS类来隐藏页面上的某些HTML元素是有用的。请查看此jsFiddle example。

<!-- HTML -->
<a id="toggle-a" href="javascript:void(0);">Hide A</a>
<p id="p-a">A</p>

/* CSS */
.hide {
  display: none;
}

/* jQuery */
$("#toggle-a").click(function() {
  $("#p-a").addClass("hide");
});

当我们将p#a应用于.hide时，是否可以淡出/动画.fadeOut()？

修改：对不起，如果我之前的问题不明确。我对以下内容感兴趣：我可以在CSS级别更改属性时触发p#a吗？在上面的示例中，当display的{{1}} 从非none更改为none时，正在发生变化？请注意，通过将名为display的类应用于其他脚本，none属性已更改为hide。

Answer 1

这是非常基本的jQuery，褪色的内容。您可以在此处使用fadeToggle()：

$("#toggle-a").click(function() {
    $("#p-a").fadeToggle();
});

演示：http://jsfiddle.net/afTdk/4/

由于只有javascript可以实际更改类，因此为类更改附加一些单独的侦听器没有多大意义。

Answer 2

查看jQuery fadeIn()和fadeOut()函数。例如：

$("#toggle-a").click(function() {
  $("#p-a").fadeOut();
});

Answer 3

这是你要找的吗？

$("#toggle-a").click(function() {
    $("#p-a").animate({'marginLeft':'200px'}, function() {
       $(this).addClass('hide');
    });
});

您可以阅读有关jquery动画的here，也不要忘记查看名为“callback”的函数（完整参数）

Answer 4

基于@Madmartigan的回答，我想我正在寻找目前jQuery中没有的东西。 jQuery无法自动监视在特定HTML元素上发生的任何 CSS更改;你基本上需要“手动”，例如if($("element").css('display') === 'block')。

也许这可能是未来的jQuery请求？：）

淡出CSS类“隐藏”的HTML元素

4 个答案: