jQuery：fadeOut然后slideDown

Question

这是我想要实现的目标：

button Contact (on click)
  |
  |--> 1. div .buttons (fadeOut)
  |
  |--> 2. div .toggle (slideDown)


button Cancel (on click)
  |
  |--> 1. div .toggle (slideUp)
  |
  |--> 2. div .buttons (fadeIn) 

如何使用jQuery实现这一目标？的 jsFiddle

Answer 1

尝试使用$.when进行回调或延期。这是一个解决方案：

$(".contact").click(function() {
    var deferred = $(".toggle").slideDown(200);
    $.when(deferred).done(function() {
        $(".buttons").fadeOut(200);
    });
});

$(".cancel").click(function() {
    var deferred = $(".toggle").slideUp(200);
    $.when(deferred).done(function() {
        $(".buttons").fadeIn(200);
    });
});