使用动画将toggleClass('hidden'）转换为.thoggle(）

Converting toggleClass('hidden') to .toggle() with animation

本文关键字：转换 thoggle hidden 动画 toggleClass      更新时间：2024-03-01

我的个人学习项目动态生成网页和JQuery项目的第一个实现使用了复选框和toggle（"慢速"）和togge（"快速"）。然而，作为CS的新手，在我的第一个项目中，管理复选框的状态变得有点复杂。所以我只切换到<label> s和.on('click', function(){...})以及$('*').click(function(){...})和.toggleClass('hidden')来处理我的用户体验。隐藏类的CSS是：

.hidden {
    display: none;
}

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

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

我已经复习了toggle、toggleClass和slideToggle的API，很好奇某个组合是否有效。如果我必须将其重写为toggle（），我如何包括showOrHide参数以及"show"或"fast"持续时间，因为我需要验证当前状态，类似于.toggleClass()的[switch]参数。

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

"如果我必须将其重写为toggle()，我如何包括showOrHide参数以及"show"或"fast"持续时间，因为我需要验证当前状态，类似于.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() { ... });

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

相关文章：