javascript - 单击按钮返回原始状态

Question

所以我有几个不同的 div，id 为“sstroke”、“pixel”、“bstroke”、“inside”、“textbox”、“text”和“piccars”。我的代码如下:

$(document).ready(function(){
    $("img#buttoncar").click(function(){
        $("div#sstroke").animate({width:168},300,"linear",function(){
            $("div#pixel").animate({width:28},150,"linear",function(){
                $("div#bstroke").animate({width:1000},1300,"linear",function(){
                    $("div#inside").animate({height:450},700);
                    $("div#textbox").animate({height:435},700,function(){
                    $("#text").delay(500).animate({opacity:1},2000);
                    $("#piccars").delay(500).animate({opacity:1},2000);
                    });
                });
            });
        });
    });
});

我的目标是让他们在再次点击“按钮车”(最初释放所有这些元素部署的愤怒的按钮)或点击另一个按钮(做同样的事情)时回到原来的状态与其他 div)，顺序与它们的部署方式相反(即从“piccars”开始，然后是“text”，一直回到“sstroke”)。

我尝试以相反的方式编写相同的内容，但它只是展开并在折叠后立即展开，我尝试了 .toogle() 东西，但它做了一些奇怪的事情(对 Angular 线部署而不是水平或垂直部署)。

谁有解决办法？我很困..

更新:这是 jsFiddle:http://jsfiddle.net/TSEJP/

Answer 1

我想这就是您要找的。我希望这可以帮助您或给您提示以继续:)

有返回按钮可以恢复所有div的位置

http://jsfiddle.net/ipsjolly/RhsgR/1/

更新动画 :P

http://jsfiddle.net/ipsjolly/RhsgR/2/