【问题标题】:Animate addClass and removeClass in Jquery在 Jquery 中动画 addClass 和 removeClass
【发布时间】: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");
  }
});

【问题讨论】:

标签: javascript jquery css


【解决方案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) 的文档:

【讨论】:

  • 值得一提的是,您的解决方案取决于jQuery UIjQuery 开箱即用不支持动画
【解决方案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");
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2017-12-06
        • 2011-11-10
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2012-05-06
        • 2013-08-14
        • 2012-01-15
        相关资源
        最近更新 更多