0

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

.hidden {
    display: none;
}

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

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

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

4

2 回答 2

3

您不能动画添加或删除一个类 - 一个类要么存在，要么不存在。该.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');

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

$(this)[showOrHide ? "show" : "hide"]('fast', function() { ... });
于 2012-07-25T05:12:18.070 回答
0

您可能想要使用 jquery 的显示和隐藏函数 $('.target').show(); $('.target').hide(); http://api.jquery.com/show/ http://api.jquery.com/hide/ 它为您提供动画过渡和回调的额外好处。然后，您只需要检查是否显示为无，而不是切换，您就会知道是显示还是隐藏它。

于 2012-07-25T05:12:58.283 回答