使所有菜單項變成動畫

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

檢查了這一點（第一工作 「徵求意見稿」，一些變量可以是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

我使用類，而不是ID和元素類型

希望它幫助引用各種組件。

Answer 2

你可以更聰明地使用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。

更乾淨的代碼，在我看來。

Answer 3

你的$（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); 
     }); 
});