0

Jquery FadeIn アニメーションでメニューを作成しました。マウスをホバーしたときにメニューを開きたいのですが、前のタブのコンテンツもフェードインしたいです。これは次のように機能するはずです：

私のマウスは、3 番目のタブ、最初のタブ popin、2 番目のタブ、3 番目のタブの 1 つで、各アニメーションの間に少し遅延があります。

私は Jquery でこれをやろうとしました:

 $('.navigation li').hover(
    // When mouse enters the .navigation element

      function () {
        var tab = $(this).attr('id');
        var numTab = tab.substring(2);
        //Fade in the navigation submenu
        for ( var i = 0; i <= numTab ; i++ ) {
          var domElt = '#Et' + i + ' ul';
          $(domElt).fadeIn(300);   // fadeIn will show the sub cat menu
          console.log(domElt);
        }
      },
      // When mouse leaves the .navigation element
      function () {
        var tab = $(this).attr('id');
        var numTab = tab.substring(2);
        //Fade out the navigation submenu
        for ( var i = 0; i <= numTab ; i++ ) {
          var domElt = '#Et' + i + ' ul';
          $(domElt).fadeOut();   // fadeIn will show the sub cat menu
        }
      }
    );

ライブ バージョンで見られるように、実際には機能せず、すべてのタブが一緒にフェードインするか、そうであるように見えます。「1 つずつフェードイン効果」を得るために遅延を追加するにはどうすればよいですか?

4

2 に答える 2

2

このように動的遅延を追加します -

 $(domElt).delay(i*100).fadeOut();

デモ---> http://jsfiddle.net/abJkD/2/

于 2013-07-19T13:24:07.703 に答える