【问题标题】:ToggleClass animate jQuery?ToggleClass 动画 jQuery?
【发布时间】:2012-06-26 02:42:02
【问题描述】:

我的网站上有一个部分,当用户单击时,我希望它展开,我为此使用 jQuery 的 toggleClass...

expandable: function(e) {
    e.preventDefault();
    $(this).closest('article').toggleClass('expanded', 1000);
}

这工作正常,只是我想以某种方式对其进行动画处理。在 chrome 中,我的文章慢慢增长到新的大小,只有在 Firefox 中它“立即”调整自身大小而没有动画,有没有办法让这个动画?

【问题讨论】:

    标签: javascript jquery html


    【解决方案1】:

    .toggleClass() 不会动画,您应该使用slideToggle().animate() 方法。

    【讨论】:

    • 使用 slideToggle() 可以设置一个最小高度,使其不会完全隐藏吗?
    【解决方案2】:

    您应该查看jQuery 上的toggle 函数。这将允许您指定一个缓动方法来定义切换的工作方式。

    slideToggle 只会向上和向下滑动,而不是向左/向右滑动,如果这是您要查找的内容。

    如果您还需要切换类,您可以在 toggle 函数中定义它:

    $(this).closest('article').toggle('slow', function() {
        $(this).toggleClass('expanded');
    });
    

    【讨论】:

    • 谢谢@Brombomb,我目前正在使用 toggleClass() 我只是不确定我是否也可以为其添加动画。
    • 正是我想要的
    • 作为旁注(因为我一开始并没有注意到这一点),.toggle() 允许您对 DOM 中元素的隐藏或显示进行动画处理。起初我以为它会为类状态之间的转换设置动画,但事实并非如此。
    【解决方案3】:

    应该检查一下,一旦我包含了 jQuery UI 库,它就可以正常工作并且正在制作动画......

    【讨论】:

      【解决方案4】:

      jQuery UI 扩展了 jQuery 原生 toggleClass 以采用第二个可选参数:duration

      toggleClass( class, [duration] )
      

      Docs + DEMO

      【讨论】:

      • 所以如果我想动画/淡化这个动作我必须使用整个 jQuery UI 库?如果没有 jQuery UI,还有其他方法可以做到这一点吗?
      • @ed1nh0,您可以只使用您需要的部分创建自定义 jQuery ui。 See here,我必须承认我不知道它应该在哪个类别中。
      • 要在 jQuery UI 中使用动画切换类,您必须加载 CoreEffect Core。见jqueryui.com/download/…
      • 我也有类似的问题。添加 UI 仍然不适合我。有任何想法吗? jsfiddle.net/jb_fresh/06bc8fwb/3
      【解决方案5】:

      您可以简单地使用 CSS 过渡,请参阅 this fiddle

      .on {
      color:#fff;
      transition:all 1s;
      }
      
      .off{
      color:#000;
      transition:all 1s;
      }
      

      【讨论】:

      • 最佳解决方案。 CSS 动画和过渡可以取代无数(现在)不必要的 JavaScript 函数和动作,并使代码更轻巧。不错的达里奥
      【解决方案6】:

      我尝试使用 toggleClass 方法在我的网站上隐藏一个项目(使用可见性:隐藏而不是显示:无)并带有轻微的动画,但由于某种原因动画无法正常工作(可能是由于旧版本jQuery UI)。

      该类已正确删除和添加,但我添加的持续时间似乎没有任何区别 - 该项目只是添加或删除而没有任何效果。

      所以为了解决这个问题,我在切换方法中使用了第二个类并应用了 CSS 过渡:

      CSS:

      .hidden{
          visibility:hidden;
          opacity: 0;
          -moz-transition: opacity 1s, visibility 1.3s;
          -webkit-transition: opacity 1s, visibility 1.3s;
          -o-transition: opacity 1s, visibility 1.3s;
          transition: opacity 1s, visibility 1.3s;
      }
      .shown{
          visibility:visible;
          opacity: 1;
          -moz-transition: opacity 1s, visibility 1.3s;
          -webkit-transition: opacity 1s, visibility 1.3s;
          -o-transition: opacity 1s, visibility 1.3s;
          transition: opacity 1s, visibility 1.3s;
      }
      

      JS:

          function showOrHide() {
              $('#element').toggleClass("hidden shown");
          }
      

      感谢@tomas.satinsky 对this post. 的精彩(而且超级简单)的回答

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2014-08-15
        • 1970-01-01
        • 2021-11-19
        • 2011-05-28
        • 2012-03-24
        • 2016-12-13
        • 2012-06-16
        • 1970-01-01
        相关资源
        最近更新 更多