Question

我注意到jQuery做了一些异步函数。例如，请查看此jsFiddle

HTML

<button id="click">
  TestMe
</button>
<div class="example">
  Hello
</div>

JS

var ex = $(".example").first();

$("#click").click(function() {
  ex.addClass("notransition")
    .width("100%")
    .removeClass("notransition");
})

CSS

.example {
  background-color: white;
  width: 50%;
  transition: width .5s ease;
}

.example.notransition {
  transition: none;
}

当您单击按钮时，预期结果是由于类 .notransition 而应该在没有动画的情况下展开div，但这不会发生。

那么我如何将这三种方法联系起来呢？

Answer 1

试试这个：使用.done（）函数

var ex = $(".example").first();

 $("#click").click(function() {
 ex.addClass("notransition").width("100%").done(function(){
  ex.removeClass("notransition");
 })

});

Answer 2

试试这个：

var ex = $(".example").first();

$("#click").click(function() {
  ex.addClass("notransition").width("100%").delay(1000).queue(function(){
    ex.removeClass("notransition");
  });
})

似乎在我的测试中运作良好。

Answer 3

由于addClass()和removeClass()不使用队列，因此它们会同时执行。

您可以使用.queue()和.dequeue()

var ex = $(".example").first();
$("#click").click(function() {
    ex.addClass("notransition").width("100%").delay(500).queue(function() {
        ex.removeClass("notransition").dequeue();
    });
});

Updated Fiddle

或简单setTimeout

var ex = $(".example").first();
$("#click").click(function() {
    ex.addClass("notransition").width("100%");
    setTimeout(function() {
        ex.removeClass("notransition").dequeue();
    },500);
});

如何顺序执行3个功能？

3 个答案: