0

編集：返信が完全に不足しているため、文言を更新しました。

説明:

LEFTボタンをクリックすると、左DIV がスライドアウトします。

RIGHTボタンをクリックすると、右DIV がスライドアウトします。

問題:

Left DIV がアウトで、RIGHTボタンがクリックされた場合>>> Slide Left DIV inと Slide Right DIV out .

右DIV がアウトで、左ボタンがクリックされた場合>>>右DIVをスライドインし、左DIVをスライドアウトします。

助けていただければ幸いです。 

$("#left").click(function () {
    if (out === 0) {
        $("#left-slide").animate({
            width: "400px"
        }, {
            queue: false,
            duration: 1900
        });
        out = 1;
    } else {
        $("#left-slide").animate({
            width: "0px"
        }, {
            queue: false,
            duration: 2000
        });
        out = 0;
    }
});

     $("#right").click(function () {
    if (out === 0) {
        $("#right-slide").animate({
            width: "400px"
        }, {
            queue: false,
            duration: 1900
        });
        out = 1;
    } else {
        $("#right-slide").animate({
            width: "0px"
        }, {
            queue: false,
            duration: 2000
        });
        out = 0;
    }
});

完全なコードを含む jsFiddle は次のとおりです: http://jsfiddle.net/fxVS9/

4

2 に答える 2

0

コンパクト版はこちら。

  $(document).ready(function () {
       $("#left,#right").click(function () {
              var clickedDiv = $(this).attr('id');
              var nonclickDiv = (clickedDiv === "left") ? "right" : "left";
              var currDiv = $('#' + clickedDiv + "-slide");
              var offDiv =  $('#' + nonclickDiv + "-slide" );
        currDiv.animate({
            width: currDiv.width() > 0 ? "0px" : "400px"
        }, {
            queue: false,
            duration: 1900
       });
       offDiv.animate({
            width: "0px"
        }, {
            queue: false,
            duration: 2000
       });
   });
 });

気に入っていただければ幸いです (そして、受け入れてください :-) ) 笑。はい担当者。

于 2013-03-02T05:18:02.940 に答える
0

http://jsfiddle.net/fxVS9/3/

$(document).ready(function () {
    var l_out = 0;
    var r_out = 0;

    $("#left").click(function () {
        if (l_out === 0) {
            $("#left-slide").animate({
                width: "400px"
            }, {
                queue: false,
                duration: 1900
            });
            l_out = 1;
        } else {
            $("#left-slide").animate({
                width: "0px"
            }, {
                queue: false,
                duration: 2000
            });
            l_out = 0;
        }
        $("#right-slide").animate({
                width: "0px"
            }, {
                queue: false,
                duration: 2000
            });
            r_out = 0;
    });

...
于 2013-03-02T04:29:27.487 に答える