jquery - jQuery如何为fadIn添加一个类？

Question

当我将鼠标悬停时，#PARENT div此脚本会highlight向其添加/删除类。我想通过让这个类（颜色/背景-img真的）褪色来增加一些优雅，在这里我失败了，但为什么呢？

为您提供舒适的小提琴：http: //jsfiddle.net/4y4vQ/1/

<div id=PARENT>
    <div id=CHILD>Content</div>
</div>​
<script>
$("#PARENT").hover(function () {
    $(this).fadeIn('slow', function() {
        $("#PARENT").toggleClass("highlight");
    });
});​
</script>

Answer 1

您可以使用 jQuery UI Switch 类，这将完全满足您的需求

http://jqueryui.com/switchClass/

Answer 2

像这样使用 CSS3 过渡：

#PARENT{
  padding: 5px 10px;
  background: white;
  -webkit-transition: background 0.3s ease;
  -moz-transition: background 0.3s ease;
  -o-transition: background 0.3s ease;
  transition: background 0.3s ease;
  }
#PARENT:hover {
  background: red;
  }

这也不需要客户端进行大量处理。

Answer 3

fadeIn不能那样工作。它将元素的不透明度从 0 更改为 1。由于您的元素已经可见，因此它什么也不做。您的 toggleClass 在回调中，因此动画一结束就会立即调用它。

您需要将自定义动画与.animate.