0

JavaScriptはほとんどわかりません。誰かが折りたたみブロックのアニメーションを作るのを手伝ってくれませんか?

    $(document).ready(function() {
    var button = $('#hideButton');
    //check the cookie when the page loads
    if ($.cookie('currentToggle') === 'hidden') {
        togglePanel(button, false);
    }
    else {
        togglePanel(button, true);
    }
    //handle the clicking of the show/hide toggle button
    button.click(function() {
        //toggle the panel as required, base on current state
        if (button.text() === "+Показать блок контента") {
            togglePanel($(this), true);
        }
        else {
            togglePanel($(this), false);
        }
    });
});
function togglePanel(button, show) {
    var panel = $('#KeywordsPanel');
    if (show) {
        panel.removeClass('hidden');
        button.text('-Скрыть блок контента');
        $.cookie('currentToggle', '', { path: '/' });
    }
    else {
        panel.addClass('hidden');
        button.text('+Показать блок контента');
        $.cookie('currentToggle', 'hidden', { path: '/' });
    }
}

これは私が現時点で持っているものです - http://jsfiddle.net/HbPF5

4

2 に答える 2

0

ワーキングデモ

jQuery の slideDown および slideUp メソッドを試してください。

$(panel).slideDown('slow');

と

$(panel).slideUp('slow');

注: これで表示クラスを追加または削除する必要もありません。

于 2013-01-03T14:48:58.763 に答える
0

panel.removeClass('hidden'); がある場所 そして panel.addClass('hidden');

それらをjQueryのshowおよびhideメソッドに置き換え、オプションで速度を含めることができます

例えば

panel.hide('slow');

と

panel.show('slow');

他のエフェクトも使用できます。jQuery ドキュメント ページはこちら: http://api.jquery.com/category/effects/

于 2013-01-03T14:46:09.867 に答える