0

我用 Jquery FadeIn 动画创建了一个菜单，我想在鼠标悬停时打开菜单，但我也想淡入上一个选项卡内容。这应该像这样工作：

我的鼠标是第三个选项卡之一，第一个选项卡弹出，然后是第二个，然后是第三个，每个动画之间都有一点延迟。

我试图用 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
        }
      }
    );

正如您在它的实时版本中看到的那样，它并没有真正起作用，所有选项卡都淡入淡出，或者似乎淡入淡出。如何添加延迟以获得“一个接一个的淡入淡出效果”？

4

2 回答 2

2

像这样添加动态延迟 -

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

演示---> http://jsfiddle.net/abJkD/2/

于 2013-07-19T13:24:07.703 回答
1

您可以链接淡入淡出：

  function () {
    var tab = this.id;
    var numTab = +(tab.substring(2));
    //Fade in the navigation submenu
    var i = 0;
    function doFade() {
      if (i === numTab) return;

      // In the fiddle provided, the element id values
      // start at 1, not zero

      var domElt = '#Et' + (i + 1) + ' ul';
      i = i + 1;
      $(domElt).fadeIn(300, doFade);
    }
    doFade();
  },

（同样适用于淡出）

于 2013-07-19T13:26:47.450 回答