我缺乏睡眠，不确定是否可以为此使用toggleClass。但是这是我的代码：
$(document).ready(function() {
// Slide Mobile Filter Sidebar On Screen
$('#showFilters').on('click', function () {
$('.filter-sidebar--mobile__close').attr('class', 'filter-sidebar--mobile__close');
$('.filter-sidebar--mobile')
.removeClass('slide-out-right is-hidden') // Remove previously added animation remove display none
.addClass('slide-in-right '); // Add animation
});
// Slide Mobile Filter Sidebar Off Screen
$('.filter-sidebar--mobile__close').on('click', function() {
$('.filter-sidebar--mobile')
.addClass('slide-out-right') // Add animation
.delay(380) // Delay for animation duration -.02s
.queue(function() {
$('.filter-sidebar--mobile').addClass('is-hidden'); // Hide after animation finishes
});
// Hide Close Button for Mobile Filter
$('.filter-sidebar--mobile__close').attr('class', 'filter-sidebar--mobile__close is-hidden');
});
});
此代码仅可使用一个完整周期。
发生了什么事？
根据JQuery文档：
请注意，在添加带有.queue（）的函数时，我们应确保最终调用.dequeue（），以便执行该行中的下一个函数。
因此，在队列回调中，您的代码应为：
$('.filter-sidebar--mobile')
.addClass('is-hidden')
.dequeue();
要么 ：
从jQuery 1.4开始，被调用的函数将另一个函数作为第一个参数传递。调用时，这将自动使下一个项目出队并保持队列移动。我们按如下方式使用它：
.queue(function(next) {
$('.filter-sidebar--mobile').addClass('is-hidden'); // Hide after animation finishes
next();
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句