jQuery滑块 - 在宽度动画之前，第二次单击更改显示为none

Question

我有这段代码

$(".guitar").toggle(function() {
    $(".guitar_content").click().animate({width: "500"}, 1000).css({display: "block"});
    $(".guitar_text").delay(1200).animate({ opacity: "1"}, 600);
}, function() {
    $(".guitar_content").click().animate({ width: "0" }, 1000);
    $(".guitar_content").delay(1000).css({ display: "none"});
});
​

我的问题是当我第二次点击时，即使我已经添加了延迟，它也会在运行宽度动画之前将显示更改为无。

如何在更改css之前让它进行宽度动画。

这是我的项目http://jsfiddle.net/TvLMQ/

Answer 1

使用回调而不是.delay：

$(".guitar_content").click().animate({width: "0"},1000, function(){
    $(this).css({display: "none"});
});