jquery - 通过 CSS 类淡出 "Hidden"的 HTML 元素

Question

有时通过添加 CSS 类来隐藏页面上的某些 HTML 元素很有用，它设置了 display: none .请看这个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 正在从非 none 改变至 none ？请注意 display属性更改为 none通过不同的脚本通过应用名为 hide 的类

Answer 1

这是非常基本的 jQuery，淡入淡出。您可以使用 fadeToggle()这里:

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

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

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