javascript - ボタンの再クリックで元の状態に戻る

Question

したがって、「sstroke」「pixel」「bstroke」「inside」「textbox」「text」および「piccars」といういくつかの異なる div があります。私のコードは次のとおりです。

$(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/

score 1 · Accepted Answer

これがあなたが探しているものだと思います。これがあなたの助けになるか、続行するためのヒントを与えることを願っています:)

すべてのdivの位置を復元する[戻る]ボタンがあります

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

アニメーションで更新：P

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

score 1 · Accepted Answer

数時間試してみた後 (私はそれほど得意ではありません..)、自分のニーズに合った解決策を見つけました。それが他のプログラマーの助けになることを願っています! どうぞ！トリックは、4 つの異なるスクリプトを使用することでした (同じボタンを再度クリックして、そのアクションですべてを元に戻すという部分には到達しませんでしたが、それでも..)。

私たちが持っているものを要約しましょう：

ボタンとして使用する 2 つの画像: "id="b1"" と "id="b2""
6 div : b1 に関連付けられた 3 つ (「div11」「div12」および「div13」)、b2 に関連付けられた 3 つ (「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 クリックで折り畳み/展開できます。
Web サイトが必要とするあらゆるニーズ (高さ、位置などのアニメーション化) に適応します!

助けてくれた人たちに乾杯！

javascript - ボタンの再クリックで元の状態に戻る

2 に答える 2

Related

Reference