修改

Question

Here你可以看到菜单的一个元素如何运作。

我被困applying this animation to all elements of menu

理论上它应该有用 - 我选择了悬停元素：

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

然后开始将动画应用于孩子：

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

我做错了什么，如何将动画应用到菜单的所有元素？

Answer 1

检查一下（第一次工作＆＃34;草案＆＃34;，某些变量可能是重复的）：

$(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

我使用类而不是id和元素类型

引用了各种组件

希望它有所帮助。

Answer 2

脉冲函数中的$（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);
      });
});

Answer 3

您可以更加智能地使用cicle，请参阅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);
}

修改

更新后，也许你的意思是像this这样的东西。

在我看来，

更干净的代码。

使所有菜单项都动画化

3 个答案:

修改