1

所以我有几个不同的 div 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);
                    });
                });
            });
        });
    });
});

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

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

有人有解决方案吗？我很卡..

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

4

2 回答 2

1

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

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

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

更新动画：P

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

于 2012-05-17T06:10:19.343 回答
1

经过几个小时的尝试（我不是那么好..），我找到了一个适合我需要的解决方案，希望能帮助其他程序员！开始！诀窍是使用 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 单击即可！
    适应您网站所需的任何需求（动画高度、位置等）！

    为帮助过的人喝彩！

    于 2012-05-18T09:42:44.520 回答