我是jQuery的初学者，我尝试为我的菜单开发一个脚本
声明如下：
- 我有一个垂直菜单
- 我有一个子菜单，可以根据用户位置移动（更改margin-top值）到页面中（跟踪他的滚动活动）
- 此子菜单位于菜单中的链接后面，并在页面中的用户位置功能中更改背景
问题是：我尝试使用.animate（）函数来更改子菜单的位置并在jQuery中创建平滑效果，但它在我的if语句中不起作用。这是我的代码：
HTML：
<div id="menu">
<div id="logo">
<h1>NAME OF THE COMPANY</h1>
</div>
<div class="sub_menu">
<div id="sub_menu_left">
<div class="selecteur_left" id="selecteur_left_presentation">
<div class="selecteur_icon">
<i class="icon-user"></i>
</div>
</div>
<div class="selecteur_right" id="selecteur_right_presentation">
</div>
</div>
<div id="sub_menu_right">
<div id="presentation_menu">
</div>
<div id="tests_menu">
</div>
<div id="entrainements_menu">
</div>
<div id="tarifs_menu">
</div>
<div id="contact_menu">
</div>
</div>
</div>
<ul>
<hr>
<li>
<a href="#presentation" id="presentation_link" class="smoothScroll">
<span>PRÉSENTATION</span>
</a>
</li>
<hr>
<li>
<a href="#tests" id="tests_link" class="smoothScroll">
<span>TESTS</span>
</a>
</li>
<hr>
<li>
<a href="#entrainements" id="entrainements_link" class="smoothScroll">
<span id="entrainement_title_menu">ENTRAÎNEMENT</span>
</a>
</li>
<hr>
<li>
<a href="#tarifs" id="tarifs_link" class="smoothScroll">
<span>TARIFS</span>
</a>
</li>
<hr>
<li>
<a href="#contact" id="contact_link" class="smoothScroll">
<span>CONTACT</span>
</a>
</li>
<hr>
</ul>
</div>
我的菜单分为3类：
- 徽标
- 子菜单（当我到达页面中的不同锚点时，它们会移动）
- 作为我的链接的li
这是我的剧本。
JAVASCRIPT：
var scrollTotal;
var height_1 = $('#presentation').outerHeight();
var height_2 = $('#presentation').outerHeight() + $('#tests').outerHeight();
var height_3 = $('#presentation').outerHeight() + $('#tests').outerHeight() + $('#entrainements').outerHeight();
var height_4 = $('#presentation').outerHeight() + $('#tests').outerHeight() + $('#entrainements').outerHeight() + $('#tarifs').outerHeight();
var height_5 = $('#presentation').outerHeight() + $('#tests').outerHeight() + $('#entrainements').outerHeight() + $('#tarifs').outerHeight() + $('#contact').outerHeight();
$(window).scroll(function(){
scrollTotal = $(window).scrollTop();
if(scrollTotal <= height_1){
$("#sub_menu_left, #sub_menu_right").animate({
marginTop: "10px",
}, 10 );
$('i').removeClass();
$('i').addClass('icon-user');
$('#presentation_menu').css({
'opacity' : '1'
});
$('#tests_menu , #entrainements_menu , #tarifs_menu , #contact_menu').css({
'opacity' : '0'
});
$('#selecteur_left_presentation').css({
'background-color' : '#34405A'
});
$('#selecteur_right_presentation').css({
'border-left-color' : '#34405A'
});
$('.selecteur_icon').css({
'background-color' : '#181d2a'
});
$('#entrainement_title_menu').css({
'color' : 'white'
});
$('#logo').css({
'border-color' : '#34405A'
})
} else if(height_1 < scrollTotal && scrollTotal <= height_2){
$("#sub_menu_left, #sub_menu_right").animate({
marginTop: "72px",
}, 10 );
$('i').removeClass();
$('i').addClass('icon-check');
$('#tests_menu').css({
'opacity' : '1'
});
$('#presentation_menu , #entrainements_menu , #tarifs_menu , #contact_menu').css({
'opacity' : '0'
});
$('#selecteur_left_presentation').css({
'background-color' : '#586E9A'
});
$('#selecteur_right_presentation').css({
'border-left-color' : '#586E9A'
});
$('.selecteur_icon').css({
'background-color' : '#3a4a69'
});
$('#entrainement_title_menu').css({
'color' : 'white'
});
$('#logo').css({
'border-color' : '#586E9A'
})
} else if(height_2 < scrollTotal && scrollTotal <= height_3){
$("#sub_menu_left, #sub_menu_right").animate({
marginTop: "133px",
}, 10 );
$('i').removeClass();
$('i').addClass('icon-sort-by-attributes');
$('#entrainements_menu').css({
'opacity' : '1'
});
$('#presentation_menu , #tests_menu , #tarifs_menu , #contact_menu').css({
'opacity' : '0'
});
$('#selecteur_left_presentation').css({
'background-color' : '#FDF5F1'
});
$('#selecteur_right_presentation').css({
'border-left-color' : '#FDF5F1'
});
$('.selecteur_icon').css({
'background-color' : '#949494'
});
$('#entrainement_title_menu').css({
'color' : '#949494'
});
$('#logo').css({
'border-color' : '#FDF5F1'
})
} else if(height_3 < scrollTotal && scrollTotal <= height_4){
$("#sub_menu_left, #sub_menu_right").animate({
marginTop: "194px",
}, 10 );
$('i').removeClass();
$('i').addClass('icon-eur');
$('#tarifs_menu').css({
'opacity' : '1'
});
$('#presentation_menu , #tests_menu , #entrainements_menu , #contact_menu').css({
'opacity' : '0'
});
$('#selecteur_left_presentation').css({
'background-color' : '#7C94AC'
});
$('#selecteur_right_presentation').css({
'border-left-color' : '#7C94AC'
});
$('.selecteur_icon').css({
'background-color' : '#546679'
});
$('#entrainement_title_menu').css({
'color' : 'white'
});
$('#logo').css({
'border-color' : '#7C94AC'
})
} else if(scrollTotal > height_4){
$("#sub_menu_left, #sub_menu_right").animate({
marginTop: "255px",
}, 10 );
$('i').removeClass();
$('i').addClass('icon-envelope ');
$('#contact_menu').css({
'opacity' : '1'
});
$('#presentation_menu , #tests_menu , #entrainements_menu , #tarifs_menu').css({
'opacity' : '0'
});
$('#selecteur_left_presentation').css({
'background-color' : '#D55C41'
});
$('#selecteur_right_presentation').css({
'border-left-color' : '#D55C41'
});
$('.selecteur_icon').css({
'background-color' : '#964735'
});
$('#entrainement_title_menu').css({
'color' : 'white'
});
$('#logo').css({
'border-color' : '#D55C41'
});
}
});
});
我想跟踪不同类别的高度，并根据页面中当前的高度移动子菜单（边缘顶部适当）。一切都有效，除了动画功能（它可以工作，但它不是动画）。如果我改变时间的值（10ms到100或1000），它永远不会动摇。
我知道我的脚本可以简化，但首先我想知道它是否可行。
任何人都有解决方案吗？
问候。
答案 0 :(得分：0)
如果您每次用户滚动时都运行此功能，那么您每次都会尝试为位置设置动画，这可能会重置动画队列。尝试过滤出动画制作过程中的元素：
// remove matched elements that are in the process of animating:
$("#sub_menu_left, #sub_menu_right").filter(':not(:animated)').animate( ..... )