jQuery的滑塊 - 第2點擊更改寬度動畫之前顯示爲無

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"}); 
});