0

デフォルトでコンテンツが非表示になっているメニューを作成しようとしていますが、特定の要素をクリックすることで表示のオンとオフを切り替えることができます。

それ自体は簡単ですが、関数にチェーン アニメーションを追加しようとすると、行き詰まります。

一言で言えば、私が達成したいことは次のとおりです。

  1. ドキュメントの読み込み時に、メニュー項目を含む順序付けられていないリストを非表示にします。同時に、メニュー項目の不透明度を 0 に変更します。
  2. メニューのトグル要素がクリックされると、最初に (slideToggle を使用して) メニューを下にスライドさせてメニューをアニメーション化し、次にメニュー項目をフェードインして完全に不透明にします。
  3. メニューが開いていてトグル要素がクリックされたら、メニュー項目を不透明度 0 に戻してフェードアウトさせ、メニューを上にスライドさせてメニューを閉じる動作をアニメーション化します。

HTMLは次のとおりです。

<p class="menu-toggle"><a href="#">Toggle</a></p>
<ul class="menu">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

CSS:

.menu-toggle {
    width: 100%;
    background: aqua;
    margin: 0;
    padding: 0;
}
.menu {
    width: 100%;
    background: orange;
    margin: 0;
    padding: 0;
    display: none;
}

そしてJavaScript：

$(document).ready(function () {

    // set some variables
    var menu_toggle = $('.menu-toggle');
    var menu = $('.menu');
    var menu_li = menu.find('li');

    // hide the menu as soon as the DOM is ready
    menu.hide();

    // change the initial opacity of the menu items
    menu_li.css({
        opacity: 0
    });

    // toggle the menu on clicking the control  
    menu_toggle.click(function () {
        menu.slideToggle(500, function () {
            menu_li.animate({
                opacity: 1
            }, 500);
        });
        return false;
    });

});

最後に、ここに jsfiddle があります: http://jsfiddle.net/EYmPA/

現在のコードで、上記の #1 を達成しました。＃2を達成しましたが、トグル要素がクリックされたのは初めてです。その後、メニュー スライドのみが機能するように見えます。最後に、#3 は部分的にしか機能しません。メニューを閉じるアニメーションは正常に機能しますが、リスト項目は必要に応じてフェードアウトしません。

私はしばらくこれに取り組んできましたが、望ましい効果が得られないようです。これを意図したとおりに機能させる方法についてのアイデアは、非常に高く評価されます。

4

1 に答える 1

0

私はあなたのコードを変更しました：

var menuShown = 0;
// toggle the menu on clicking the control  
menu_toggle.click(function () {
    if(menuShown){
        menu.slideUp(500, function(){
            menu_li.animate({opacity: 0}, 500);
            menuShown = 0;
        })
    }else{
        menu.slideDown(500, function(){
            menu_li.animate({ opacity: 1}, 500);
            menuShown = 1;
        });
    }
    return false;
});

ここにデモがあります

于 2013-07-31T02:01:13.957 に答える