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

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