Question

所以我有几个不同的divs id'ed“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（），但它做了一些奇怪的事情（对角线而不是水平或垂直部署）。

任何人都有解决方案吗？我很困惑..

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

Answer 1

我认为这就是你要找的东西。我希望这可以帮助你或给你一个提示继续：）

有Go Back按钮可以恢复所有div的位置

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

动画更新：P

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

Answer 2

经过几个小时的尝试（我不是那么好......），我找到了一个符合我需求的解决方案，这有望帮助其他程序员！开始！诀窍是使用4个不同的脚本（我没有得到重新点击同一个按钮并将所有内容折回到该动作上的部分，但仍然......）。

让我们总结一下我们所拥有的：

我们将用作按钮的2张图片：“id =”b1“”和“id =”b2“”
6个div：3个与b1相关联（“div11”“div12”和“div13”），3个与b2相关联（“div21”“div22”和“”div23“）我们需要的是div 11,12和13在点击b1时“展开”并在点击b2时重新折叠，使得div 21,22和23展开（当重新点击b1时也是如此，等等..）。

所以我们走了：

脚本1：点击b1时展开

>$(document).ready(function(){
    $("#b1").click(function(){
        $("#div11").animate({width:100},500,"linear",function(){
            $("#div12").animate({width:150},750,"linear",function(){
                $("#div13").animate({height:200},1000,linear,function(){
                });
            });
        });
    });
    });

脚本2：点击b2时展开

$(document).ready(function(){
    $("#b2").click(function(){
        $("#div21").animate({width:100},500,"linear",function(){
            $("#div22").animate({width:150},750,"linear",function(){
                $("#div23").animate({height:200},1000,linear,function(){
                });
            });
        });
    });
    });

脚本3：按b1 按其出现的相反顺序折叠b2

$(document).ready(function(){
        $("#b2").click(function(){
        $("#div23").animate({width:0},500,"linear",function(){
            $("#div22").animate({width:0},375,"linear",function(){
                $("#div21").animate({height:0},275,linear,function(){
                });
            });
        });
    });
    });

脚本4：按b2 按其出现的相反顺序折叠b1

$(document).ready(function(){
    $("#b1").click(function(){
        $("#div13").animate({width:0},500,"linear",function(){
            $("#div12").animate({width:0},375,"linear",function(){
                $("#div11").animate({height:0},275,linear,function(){
                });
            });
        });
    });
    });

HTML

<html>
   <head>
    <link rel="shortcut icon" href="images/rocherico.ico"/>
    <title>fold-unfold</title>
    <link rel="stylesheet" type="text/css" href="css/fold-unfold.css"/>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
    </script>
    <script type="text/javascript" src="scripts/script1.js"></script>
    <script type="text/javascript" src="scripts/script2.js"></script>
    <script type="text/javascript" src="scripts/script3.js"></script>
    <script type="text/javascript" src="scripts/script4.js"></script>
   </head>
    <body>
    <div id="div11"></div>
    <div id="div12"></div>
    <div id="div13"></div>
    <div id="div21"></div>
    <div id="div22"></div>
    <div id="div23"></div>
    </body>
    </html>

CSS

#div11 {background:"red";height:100px;width:0px;position:absolute;top:10px;left:100px}
#div12 {background:"red";height:130px;width:0px;position:absolute;top:10px;left:200px}
#div13 {background:"red";height:70px;width:0px;position:absolute;top:10px;left:350px}
#div21 {background:"blue";height:100px;width:0px;position:absolute;top:250px;left:100px}
#div22 {background:"blue";height:130px;width:0px;position:absolute;top:250px;left:200px}
#div23 {background:"blue";height:70px;width:0px;position:absolute;top:250px;left:350px}

然后我们去：折叠/展开1点击即可！适应您网站所需的任何需求（动画高度，位置等）！

为那些帮助过的人干杯！

单击按钮返回原始状态

2 个答案: