Question

我有一个相对简单的jQuery函数，它有一个条件和一些类添加和幻灯片切换。

$('div').on('click', function() {
    if($('#header .nav').hasClass('open')) {
        $('#header .nav').removeClass('open');
        $('#header .nav').slideToggle();
        $('#header .nav').delay(400).removeAttr('style'); <---DELAY THIS LINE
    } else {
        $('#header .nav').addClass('open');
        $('#header .nav').slideToggle();
    }
    $('div').toggleClass('isActive');
});

在第五行代码中，我试图延迟删除style属性。我基本上试图让它在删除属性之前完成上面的幻灯片切换。我已经尝试过使用.delay，但它不起作用。它仍然与幻灯片同时执行删除。

有什么想法吗？

Answer 1

你可以这样做，因为removeAttr不能与队列一起使用，像animation() / slideDown()这样的方法适用于延迟队列，这就是我们可以用{链接'执行的原因{3}}致电。

您可以使用简单的setTimeout（）来执行此操作。

$('div').on('click', function () {
    if ($('#header .nav').hasClass('open')) {
        $('#header .nav').removeClass('open');
        $('#header .nav').slideToggle();
        setTimeout(function () {
            $('#header .nav').removeAttr('style');
        }, 400)
    } else {
        $('#header .nav').addClass('open');
        $('#header .nav').slideToggle();
    }
    $('div').toggleClass('isActive');
});

您可以通过向队列添加回调来使用延迟，例如

$('#header .nav').delay(400).queue(function (nxt) {
    $(this).removeAttr('style');
    nxt();
})

但您可以将代码简化为

$('div').on('click', function () {
    var $nav = $('#header .nav');
    $nav.toggleClass('open').slideToggle(function () {
        if (!$nav.hasClass('open')) {
            $nav.removeAttr('style');
        }
    })
});

Answer 2

我认为为了您的目的，您可以使用下面给出的slideToggle为什么您需要在 slideToggle（）延迟（）或 setInterwal >提供此设施请尝试此

$('div').on('click', function() {
    if($('#header .nav').hasClass('open')) {
        $('#header .nav').removeClass('open');
        $('#header .nav').slideToggle(function(){
             $(this).removeAttr('style'); <---DELAY THIS LINE ///(Will execute after the toggle will executed);
        });
       
    } else {
        $('#header .nav').addClass('open');
        $('#header .nav').slideToggle();
    }
    $('div').toggleClass('isActive');
});

这里我附上了以上喜欢的代码的示例示例...... !!

Sample Demo running example

Answer 3

.delay（）方法最适合延迟排队的jQuery效果。因为它是有限的 - 例如，它没有提供取消延迟的方法 - .delay（）不能替代JavaScript的本机setTimeout函数，这可能更适合某些用例。（来源：https://api.jquery.com/delay/）

使用此：

-rw-r--r-- 1 mayukh mayukh 0 Aug 17 06:11 data

如何在下次执行之前延迟jQuery函数？

3 个答案: