2

以下の例ではID「Home」をクリックするとdiv.panelが表示され、再度ID「Home」をクリックするとdiv.panelが非表示になります。現在、私はこれを持っています：

$(document).ready(function() {
$('#home').on('click', function() {
    $('div.panel').animate({
        'width': 'show'
    }, 1000, function() {
        $('div.home').fadeIn(500);
    });
});

$('#home').on('click', function() {
    $('div.home').fadeOut(500, function() {
        $('div.panel').animate({
            'width': 'hide'
        }, 1000);
    });
});
});
4

2 に答える 2

5

#homeイベント ハンドラーをそのまま複製することで、がクリックされるたびに、これらの関数の両方が同時に実行されようとします。いずれかを実行するかどうかを決定するには、条件を使用する必要があります。

$(document).ready(function () {
    $('#home').on('click', function () {
        if ($('div.home').is(':visible')) {
            $('div.home').fadeOut(500, function () {
                $('div.panel').animate({
                    'width': 'hide'
                }, 1000);
            });
        } else {
            $('div.panel').animate({
                'width': 'show'
            }, 1000, function () {
                $('div.home').fadeIn(500);
            });
        };
    });
});
于 2012-11-12T22:20:37.083 に答える
1

あなたのコードはある時点で冗長です ( の二重定義$('#home').on('click', function()...)。そのうちの 1 つだけが必要です。あなたが説明したことを実現するために、jqueries の「トグル」はあなたの友達です。次のように実行できます。

$('#home').on('click', function() {
    $('div.panel').animate({
        'width': 'toggle'
    }, 1000); });

実際の例については、このフィドルを参照してください。

于 2012-11-12T22:34:50.363 に答える