在这里，您可以看到菜单的一个元素如何工作。
我一直坚持将此动画应用于菜单的所有元素
从理论上讲应该可以工作-我通过以下方式选择了悬停元素：
$('#menu').find('.category-holder');
然后开始将动画应用于儿童：
$(this).children().eq(0).delay(100).animate({opacity: '1'},400)
我在做错什么，如何将动画应用于菜单的所有元素？
检查一下（首先工作的“草稿”，某些变量可能是多余的）：
$(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);
});
}）;
我使用类而不是id和元素类型引用了各种组件
希望能有所帮助。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句