Question

我的第一个实现动态生成的网页和JQuery项目的个人学习项目使用了复选框和切换（“慢”）和切换（“快速”）。然而，完全是CS的新手，管理复选框的状态对于我的第一个项目来说有点复杂。因此，我只使用<label>切换到.on('click', function(){...}) s和$('*').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()的[switch] ]参数。

Answer 1

您无法为类的添加或删除设置动画 - 类是否存在。 .toggle('fast')效果是通过在隐藏元素之前设置元素的特定CSS属性的动画来生成的。

“如果我必须将其重写为 toggle()，如何包含 showOrHide 参数以及”显示“或”快速“持续时间，因为我需要验证当前状态，类似于 .toggleClass()'s [switch] 参数。”

由于目前没有.toggle()的版本可以这样运行：

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

...你可以这样做：

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

......这是一种简写的说法：

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

如果你想在完成show / hide时运行一个回调函数，那么：

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

Answer 2

你可能想要使用jquery的show和hide函数$（'。target'）。show（）; $（ '目标'）隐藏（）。 http://api.jquery.com/show/ http://api.jquery.com/hide/它为您提供了动画过渡和回叫的额外好处。然后，您只需要检查显示是否为空，而不是切换，您将知道是否显示或隐藏它。

使用动画将toggleClass（'hidden'）转换为.toggle（）

2 个答案: