Geek Answers Handbook

Make all menu items animated

Here you can see how one menu item works.

I'm stuck applying this animation to all menu items

In theory, this should work - I chose the hovering element:

$('#menu').find('.category-holder');

and then start applying the animation to childs:

$(this).children().eq(0).delay(100).animate({opacity: '1'},400)

What am I doing wrong and how to apply animation to all menu items?

+4
source share
3 answers

check this (first working "project", some variable may be redundant):

$(document).ready(function (){
  $('.category-holder').hover(function (){
    // cache the parent menu element
    var menu = $(this).closest('.aMenu');
    var container = $(this);
    var containerFirstChild = $(this).children().first();
    var lettersArr = container.children();
    menu.data('pulsating',true);
    var numOfLetters = $(this).children().length;

    function pulse(){
      if(!menu.data('pulsating')) return;

        for (var i=0; i<numOfLetters ; i++) {
         lettersArr.eq(i).delay((i+1)*100).animate({opacity: '1'},400);
        }

      for (var i=0; i<numOfLetters ; i++) {
        if(i==numOfLetters-1){
                lettersArr.eq(i).animate({opacity: '0.3'},400,pulse);
        } else {
                lettersArr.eq(i).animate({opacity: '0.3'},400);
        }

      }
    }
    pulse();
  }, function(){
     // cache the parent menu element
     var menu = $(this).closest('.aMenu');

    $(this).animate({opacity: '0.5'}, 400);
      menu.data('pulsating',false);
  });

});

example

I referenced various components using classes instead of id and element types

Hope this helps.

+3
source

$() - , . . :

$(document).ready(function (){
      $('#menu').find('.category-holder').hover(function (){
          var that = $(this);
        $('#menu').data('pulsating',true);
        function pulse(){
          if(!$('#menu').data('pulsating')) return;
          that.children().eq(0).delay(100).animate({opacity: '1'},400);
          that.children().eq(1).delay(200).animate({opacity: '1'},400);
          that.children().eq(2).delay(300).animate({opacity: '1'},400);
          that.children().eq(3).delay(400).animate({opacity: '1'},400);
          that.children().eq(4).delay(500).animate({opacity: '1'},400);
          that.children().eq(5).delay(600).animate({opacity: '1'},400);
          that.children().eq(6).delay(700).animate({opacity: '1'},400);

          that.children().eq(0).animate({opacity: '0.3'},400);
          that.children().eq(1).animate({opacity: '0.3'},400);
          that.children().eq(2).animate({opacity: '0.3'},400);
          that.children().eq(3).animate({opacity: '0.3'},400);
          that.children().eq(4).animate({opacity: '0.3'},400);
          that.children().eq(5).animate({opacity: '0.3'},400);
          that.children().eq(6).animate({opacity: '0.3'},400,pulse);
        }
        pulse();
      }, function(){
          $('#menu span:first').animate({opacity: '0.5'}, 400);
          $('#menu').data('pulsating',false);
      });
});
+2

You can do smarter for cicle, see DEMO .

var $target =   $('#menu span:first span');
for(var i = 0; i != $target.length; ++i) {
  $target.eq(i).delay(100 * (i + 1)).animate({opacity: '1'},400);
}

Edit

After your update, maybe you mean things like this .

cleaner code in my opinion.

0
source

More articles:


All Articles