40

我的网站上有一个部分，当用户点击我希望它展开时，我正在使用 jQuery 的toggleClass...

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

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

4

6 回答 6

65

jQuery UI 扩展了 jQuery nativetoggleClass以采用第二个可选参数：duration

toggleClass( class, [duration] )

文档 + 演示

于 2012-06-24T17:12:48.197 回答
26

.toggleClass()不会动画，你应该去slideToggle()或.animate()方法。

于 2012-06-24T16:42:11.877 回答
17

你可以简单地使用 CSS 过渡，看到这个小提琴

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

.off{
color:#000;
transition:all 1s;
}
于 2015-02-27T02:42:54.647 回答
8

我尝试使用 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 对这篇文章的精彩（而且超级简单）的回答。

于 2016-04-16T15:12:47.423 回答
6

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

slideToggle如果那是您正在寻找的，只会上下滑动，而不是左右滑动。

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

$(this).closest('article').toggle('slow', function() {
    $(this).toggleClass('expanded');
});
于 2012-06-24T16:44:26.097 回答
0

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

于 2012-06-24T16:49:43.893 回答