jQuery 添加类和动画

Question

StackOverflow 的大牛们，救救我吧:)

我一直在努力让它工作一段时间，我已经反复阅读文档，尝试了很多愚蠢的事情，现在我越看越觉得我的脑子一片空白，所以如果有人可以阐明一些问题，我将不胜感激。我试图让 jQuery 为 addClass 命令设置动画。它工作正常，向元素添加和删除类没有问题，但我希望它淡入类然后淡出类，这是代码:

<script type="text/javascript">
  function addingClasses(id,myClass) {
    $(id).addClass(myClass).animate({
      show: 'fadeIn',
      speed: '2000',
      hide: 'fadeOut'
    });
  }

  function removingClasses(id,myClass) {
    $(id).removeClass(myClass);
  }
</script>

<div id="about" class="sittingPretty" onmouseover="addingClasses(this, 'aboutHover')" onmouseout="removingClasses(this, 'aboutHover')">
    <p>About</p>
</div>

如果有人能提供帮助，我将不胜感激，再次感谢大家:)

Answer 1

您要做的是设置一个 var 并转换为该值。

一个简短的例子是:

<script type="text/javascript">
    function addingClasses(id,myClass) {
        var newValue = { opacity : 100 }
        $(id).addClass(myClass).animate(newValue, 1000);  
    }
    function removingClasses(id,myClass) {
        var newValue = { opacity : 0 }
        $(id).removeClass(myClass).animate(newValue, 1000);
    }
</script>

这会逐渐将不透明度从当前值更改为您传递给它的值。

这不是最好的方法，但它会起作用:)