Javascript 设置所有菜单项的动画

您可以看到菜单的一个元素是如何工作的

我卡住了

理论上它应该可以工作-我通过以下方式选择了悬停元素：

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

然后开始将动画应用于儿童：

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

---

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

您可以使用for cicle进行更智能的操作，请参阅

编辑 在你的更新之后，也许你指的是这样的东西

在我看来，更干净的代码。

你在pulse函数中的$（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);
      });
});

检查此项（第一个工作“草稿”，某些变量可能会被删除）：

$（文档）.ready（函数（）{
$（'.category holder'）。悬停（函数（）{
//缓存父菜单元素
var菜单=$（this）.closest（'.aMenu'）；
var容器=$（此）；
var containerFirstChild=$（this.children（）.first（）；
var lettersArr=container.children（）；
菜单数据（“脉动”，真实）；
var numOfLetters=$（this）.children（）.length；
函数脉冲（）{
如果（！menu.data（‘脉动’）返回；
对于（var i=0；ione moment-混淆了第二个链接…到底是什么问题？你得到了什么？你期望什么？有没有想法如何将First fiddle中的动画应用到第二个fiddle中菜单的所有元素？@Velthune哇，这不太准确，我可能解释得不好-我需要使用此动画制作菜单中的所有元素更新之前看到了链接。顺便说一句，这是一个很好的代码！我给你发了一个更新我更新了我的答案，顺便说一下，有一些错误，但是你可以很容易地解决它+1。太棒了。我现在正在处理它。你完全正确-数量字母的动画有问题，它被完美地解决了！
$(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);
      });
});

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