1

皆さん、ボタンをクリックすると 1 つのパネルが左にスライドし、別のパネルが表示されるという効果を生み出そうとしています。もう一度クリックすると、現在のものはスライドして離れ、前のものはトグル ボタンのようにスライドして戻ります。

私は次のコードを持っており、それは「一種の」動作をします...クリックしたときのコードは、最初にクリックしたときは問題ないように見えますが、2回目は、表示中のパネルが最初に非表示になる前にパネルがオーバーラップします。

したがって、私が探しているものを簡単にするために、400x600 の 2 つの div があり、デフォルトで div 1 を表示していて、ボタンをクリックすると、div 1 がビューから左にスライドし、div 2 も左からスライドするとします。 div 1 が非表示になり、もう一度クリックすると、div 2 が左にスライドし、div 1 も左からスライドして戻ります...トグルします..

jQuery(".button").click(function() {
    var $lefty = jQuery(".home");
       $lefty.animate({
       left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.outerWidth() : 0}, 

 function() {
    jQuery(".member_home").show();
    var $lefty = jQuery(".member_home");
       $lefty.animate({
       left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.outerWidth() : 0
});

});
    return false;
});

誰かがここで私に手を差し伸べることができれば、それは素晴らしいことです! ありがとう！

4

2 に答える 2

1

問題は、実際には常にそうではないのに、常にアニメーションを.home続けてからであるということだと思います。が画面外の.member_home場合、最初に画面外でアニメーション化し、次にアニメーション化する必要があります。表示される効果は、画面外にあるかどうかに関係なく、常に同じ順序でアニメーション化するためです。.home.member-home.homediv

これを修正するロジックを追加する関数は次のとおりです。

function toggleDivs() {
    var $home = $("#home");
    var $memberHome = $("#member-home");
    var $slideOut, $slideIn;

    // See which <divs> should be animated in/out.
    if ($home.position().left < 0) {
        $slideIn = $home;
        $slideOut = $memberHome;
    }
    else {
        $slideIn = $memberHome;
        $slideOut = $home;
    }

    $slideOut.animate({
        left: "-" + $slideOut.width() + "px"
    }, function() {
        $slideIn.animate({ left: "0px" });
    });
}

次に、ボタンクリックハンドラーからその関数を呼び出します。

$("button").bind("click", function() {
    toggleDivs();
});

ここで実際の例を確認してください：http：//jsfiddle.net/andrewwhitaker/qSvDz/。

于 2010-12-22T17:00:34.653 に答える
0

2番目のパネルのスライドインをコールバック関数にします。その後、最初のパネルが非表示になるまでスライドインしません。 編集

jQuery(".button").click(function() {
    var $lefty = jQuery(".home");
       $lefty.animate({
       left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.outerWidth() : 0}, 

 function() {
    jQuery(".member_home").show(400,function() {
        var $lefty = jQuery(".member_home");
           $lefty.animate({
           left: parseInt($lefty.css('left'),10) == 0 ? -$lefty.outerWidth() : 0
    });
});

});
    return false;
});
于 2010-12-22T16:36:26.863 に答える