javascript - 将toggleClass ('hidden' ) 转换为带有动画的.toggle()

Question

我的个人学习项目的动态生成网页和 JQuery 项目的第一次实现使用了复选框和切换(“慢”)和切换(“快”)。然而，对于 CS 来说还是个新手，管理复选框的状态对于我的第一个项目来说有点复杂。所以我只切换到<label>和 .on('click', function(){...})和$('*').click(function(){...})与 .toggleClass('hidden')处理我的用户体验。隐藏类的 CSS 是:

.hidden {
    display: none;
}

现在的问题是类的切换是瞬时发生的，我希望用户能够看到 .toggle()就像 .toggle('slow')或.toggle('fast') 。我如何转换以下行来实现这种视觉反馈？

$(this).toggleClass('hidden');

我已经查看了toggle、toggleClass 和slideToggle 的API，并且很好奇某个组合是否有效。如果我必须将其重写为toggle()，我该如何包含showOrHide参数以及“show”或“fast”持续时间，因为我需要验证当前状态，类似于.toggleClass()的[开关]参数。

Answer 1

您无法以动画方式添加或删除类 - 类要么存在，要么不存在。 .toggle('fast') 效果是通过在隐藏元素之前对元素的特定 CSS 属性进行动画处理来产生的。

"If I have to rewrite it to toggle(), how do I include the showOrHide parameter, along with the "show" or "fast" duration, as I need to verify current state, similar to .toggleClass()'s [switch] parameter."

由于当前没有像这样工作的 .toggle() 版本:

$(this).toggle('fast', showOrHide)

...您可以这样做:

$(this)[showOrHide ? "show" : "hide"]('fast');

...这是一种简写方式:

if (showOrHide)
   $(this).show('fast');
else
   $(this).hide('fast');

如果您想在显示/隐藏完成后运行回调函数，则:

$(this)[showOrHide ? "show" : "hide"]('fast', function() { ... });