CODEWITHSUNDEEP
javascriptjqueryanimation
Rahil
Rahil

Reputation: 225

Make all menu items animated

Here you can see how works one element of menu.

I'm stuck applying this animation to all elements of menu

In theory it should work - I selected the hovered element by :

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

and then begin applying animation to childs:

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

What I'm doing wrong and how can I apply animation to all elements of menu?

Upvotes: 4

Views: 68

Answers (3)

Luca Davanzo
Luca Davanzo

Reputation: 21520

You can do more smart with 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 a stuff like this.

more clean code, in my opinion.

Upvotes: 0

vov
vov

Reputation: 46

check this out (first working "draft", some variable may be redundent):

$(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's and element types

Hope it helped.

Upvotes: 3

niko
niko

Reputation: 286

Your $(this) in the pulse function is not what you think it is. It will only work in the outer hover statement. You can fix it like this:

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

Upvotes: 2

Related Questions