jQuery addClass 和动画

Posted 2023-05-08

【中文标题】jQuery addClass 和动画

【英文标题】：jQuery addClass & animations

【发布时间】：2011-10-30 10:50:59

【问题描述】：

*** 的好人，请救救我 :)

我一直在努力让它工作一段时间，我反复阅读了文档，尝试了很多愚蠢的事情，现在我越看越觉得我的大脑一片空白，所以如果有人可以提供一些启发，我将不胜感激。我正在尝试让 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>

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

【问题讨论】：

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

【参考方案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" );
);