我有一个 span 类，当用户向下滚动到 160px 时，应该使用 animate() 显示它； 第一次和第二次都工作正常，之后 animate() 显示速度非常慢。
我的代码是..
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>tokka</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<style>
/*-------------- TopBar----------*/
#topbar{
padding: 0px;
background-color: #2483A0;
}
#topbar .topextra{
background-color: #000000;
color: #ffffff;
}
#topbar .collection .logo_box{
min-width: 200px;
padding: 1px;
}
#topbar .collection .logo_box a{
display: inline-block;
margin-right: 5px;
color: #ffffff;
}
</style>
<script language="javascript" src="../lib/jquery/jquery.js"></script>
<script language="JavaScript" src="../lib/bootstrap/bootstrap.js"></script>
<script language="JavaScript" src="../lib/angular/angular.js"></script>
<script language="javascript">
$(document).ready(function(){
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 160) {
$("#category_navbar").slideUp(function(){
$(".topextra").slideUp();
$("#showmenow").animate({'margin-left':"0px"});
});
} else {
$(".topextra").slideDown(function(){
$("#category_navbar").fadeIn();
$("#showmenow").animate({'margin-left':"-50px"});
});
}
});
// scroll body to 0px on click
/*$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 600);
return false;
});*/
});
});
</script>
</head>
<body>
<br><br><br><br>
<div id="topbar" class="navbar navbar-default navbar-fixed-top topnavbar no-radius" role="navigation">
<div class="container-fluid">
<div class="row topextra">
something
</div>
<div class="row collection">
<div class="col-md-2">
<div class="navbar-header">
<div class="logo_box pull-right">
<span id="showmenow" style="margin-left:-50px;"><a href="#"><h4>title</h4></a></span>
<a href="#"><img ng-src="..." style="height: 30px; width: 90px"/></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="navbar navbar-inverse" id="category_navbar" style="width:100%;position: fixed;">
this is me
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
最佳答案
似乎有两个问题。
只有在
slideUp()或slideDown动画完成后才会调用您的动画代码。因此，最好将其放在 oncomplete 函数之外，这样无论先前的动画是否完成，它都会被调用。每次调用
$(window).scroll()时，您都会在$("#showmenow")上调用动画，即使实际上并未调用进行任何更改。即使没有执行任何操作，动画也会花费一定的时间，因此等待先前的动画完成会导致延迟。我认为添加一个 if 语句来检查是否需要动画可以解决这个问题。
所以你的 JS 代码将变成:
$(document).ready(function(){
$(window).scroll(function () {
if ($(this).scrollTop() > 160) {
if($("#showmenow").css('marginLeft')=="-50px"){
//only run when animation is required
$("#showmenow").animate({'margin-left':"0px"});
}
$("#category_navbar").slideUp(function(){
//only runs after slideUp() has completed
$(".topextra").slideUp();
});
} else {
if($("#showmenow").css('marginLeft')=="0px"){
//only run when animation is required
$("#showmenow").animate({'margin-left':"-50px"});
}
$(".topextra").slideDown(function(){
//only runs after slideDown() has completed
$("#category_navbar").fadeIn();
});
}
});
});
这是一个有效的 JS Fiddle:http://jsfiddle.net/5hU7b/1/
有一个小替代方案，您可以使用 stop() ( http://api.jquery.com/stop/ ) 来停止之前的动画并清除队列，而不是使用 if 语句来检查动画是否应该运行。在这种情况下，您的代码将变为:
$(document).ready(function(){
$(window).scroll(function () {
if ($(this).scrollTop() > 160) {
//stop previous animations and clear queue
$("#showmenow").stop(true).animate({'margin-left':"0px"});
$("#category_navbar").slideUp(function(){
//only runs after slideUp() has completed
$(".topextra").slideUp();
});
} else {
//stop previous animations and clear queue
$("#showmenow").stop(true).animate({'margin-left':"-50px"});
$(".topextra").slideDown(function(){
//only runs after slideDown() has completed
$("#category_navbar").fadeIn();
});
}
});
});
这是 JS fiddle :http://jsfiddle.net/5hU7b/2/
关于javascript - 在scrollTop 中使用时，jQuery animate() 在 margin-left 上无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24323504/