在 Jquery 中动画 addClass 和 removeClass

Posted 2023-05-08

【中文标题】在 Jquery 中动画 addClass 和 removeClass

【英文标题】：Animate addClass and removeClass in Jquery

【发布时间】：2018-03-02 18:21:26

【问题描述】：

我有一个简单的代码，可以在单击 div 时删除一个类。我正在寻找的是，我可以让它从左到右滑入，而不仅仅是显示单击 div 的时间吗？

$(document).scroll(function() 
  var y = $(this).scrollTop();
  if (y > 140) 
    $('#primary-menu-container').addClass("hide-nav-fixed");
   else 
    $('#primary-menu-container').removeClass("hide-nav-fixed");
  
);

【问题讨论】：

animating addClass/removeClass with jquery的可能重复

【参考方案1】：

如果您使用 jQueryUI，只需将参数添加到您的 add/removeClass 函数，如下所示：

.addClass('class-name', time-in-milliseconds, 'effect');

具有 1 秒摇摆效果的结果：

$(document).scroll(function() 
    var y = $(this).scrollTop();
    if (y > 140) 
        $('#primary-menu-container').addClass('hide-nav-fixed', 1000, 'swing');
     
    else 
        $('#primary-menu-container').removeClass('hide-nav-fixed', 1000, 'swing');
    
);

这是 (addClass/removeClass) 的文档：

addClass() http://api.jqueryui.com/addclass/ removeClass() http://api.jqueryui.com/removeclass/

【讨论】：

值得一提的是，您的解决方案取决于jQuery UI。 jQuery 开箱即用不支持动画

【参考方案2】：

只需创建另一个名为'slide-left'的类

.slide-left
    margin-left:-500px;
    transition:margin-left 500ms;

并像添加其他类一样添加它。然后，在 500 毫秒后你可以隐藏它。

编辑：您可以按照相同的策略以任何方式移动 div。并且根据div当前的css属性，其他属性会更适合制作动画

【参考方案3】：

这就是你要找的东西吗：

Animate.css

可以附加到 html 元素的简单 CSS 动画的集合。当您按下按钮并在删除项目之前执行相同操作（在实际删除项目之前设置足够长的计时器）时，请查看作者如何在演示中链接动画。添加时，您也只需添加一个动画类。

大量动画似乎适合从列表中删除条目

您始终可以自己制作动画，但何必浪费时间，这些都是经过实战考验且有效的。如果您不想通过删除所有不需要的东西来使整个包装成为您自己的？

【参考方案4】：

如果没有 CSS3（与非常旧的浏览器版本不兼容），您可以在添加类后使用 jquery animate 功能：

$('#primary-menu-container').animate("left":"0px", "slow");