jQuery addClass 和动画答案

【问题标题】：jQuery addClass & animationsjQuery addClass 和动画
【发布时间】：2023-03-22 21:15:01
【问题描述】：

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>

如果有人可以提供帮助，我将非常感激，再次感谢大家:)

【问题讨论】：

可能是 stackoverflow.com/questions/1248542/… 的副本？

标签： jquery html jquery-ui jquery-animate

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

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

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

【讨论】：

【解决方案2】：

这是一个简单的答案 - 使用 jQuery UI 检查这个动画 div：

$( "div" ).click(function() {
    $( this ).addClass( "big-blue", 1000, "easeOutBounce" );
});

【讨论】：