CODEWITHSUNDEEP
javascriptjquerydelayfadein
Xavier
Xavier

Reputation: 4017

Delay fadeIn() in a for-loop

I created a menu with Jquery FadeIn animation, i want to open the menu when my mouse is hover but i also want to fadein the previous tab content. This should works like this :

My mouse is one the third tab, the first tab popin, then the second one, then the third with a little delay between each animation.

I tried to do this with 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
        }
      }
    );

As you see on the live version of it, it don't really works, all the tabs are fadein together, or seems to. How can i add a delay to get the "one-after-one fadein effect"?

Upvotes: 0

Views: 99

Answers (2)

Pointy
Pointy

Reputation: 413895

You can chain the fades:

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

(and similarly for the fade out)

Upvotes: 1

Adil Shaikh
Adil Shaikh

Reputation: 44740

Add dynamic delay like this -

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

Demo ---> http://jsfiddle.net/abJkD/2/

Upvotes: 2

Related Questions