延迟，setTimeout - 如何在点击时延迟 2 件事？

Question

应该很简单，但我瞎了;(

我想做的是：我点击一个按钮。我做了一些 clickstuff，但我还想在另一个元素上使用 blur-transition-css-effekt。所以我添加了一个 class 然后延迟（因为这是一个很好的效果）另一个 class 做一个模糊效果。但现在我想要删除过渡-class。这应该在添加模糊 class 时发生。有什么想法吗？上面的代码需要用 removeClass('.transition') ...

完成

$('#clicky').click(function(e){

$("#click").addClass("transition").delay(1000).queue(function(){
    $('#blurmewithtransition').addClass("blur").dequeue();

});

});

Answer 1

您可以使用相同的 .queue 函数来完成。

$('#clicky').click(function(e){

    $("#clicky")
    .queue(function(){
        $(this).addClass("transition").dequeue();
    })
    .delay(1000)
    .queue(function(){
        $(this).addClass("blur").dequeue();
    })
    .delay(1000)
    .queue(function(){
        $(this).removeClass('transition').dequeue();
        $(this).removeClass('blur').dequeue();
    });

});

检查 html 元素，您可以看到如何添加和删除 css 类，我在 add/remove css 类之间添加了延迟，以便更好地查看和检查。

DEMO

延迟，setTimeout - 如何在点击时延迟 2 件事？

delay, setTimeout - how to do 2 things delayed on click?

click

delay

settimeout