Question

我创建了一个带有Jquery FadeIn动画的菜单，我希望在我的鼠标悬停时打开菜单，但我也希望淡化前一个标签内容。这应该是这样的：

我的鼠标是第三个标签，第一个标签popin，然后是第二个标签，然后是第三个标签，每个动画之间有一点延迟。

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

正如你在the live version上看到的那样，它并没有真正起作用，所有标签都在一起淡化，或者似乎都在。如何添加延迟以获得“一对一的淡化效果”？

Answer 1

像这样添加动态延迟 -

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

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

Answer 2

你可以链接淡出：

  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();
  },

（同样淡出）

在for循环中延迟fadeIn（）

2 个答案: