几秒后，Jquery动画（）响应非常缓慢
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了几秒后，Jquery动画（）响应非常缓慢相关的知识，希望对你有一定的参考价值。
徽标元素的填充将是填充：9px 0;负载。当用户开始向下滚动页面时，我使用animation（）将填充设置为0px，当用户返回到页面顶部时，使用animation（）将填充再次设置为jquery中的9px 0。现在问题是动画，当用户滚动到页面顶部仅在几秒钟后启动。我需要它立即发生。
http://testing.coreintegrator.com/以下是它的演示
$(window).scroll(function (event)
var scroll = $(window).scrollTop();
if(scroll != 0)
$('.logo').animate(padding: "0px 0px");
else
$('.logo').animate(padding: "9px 0px");
);
答案
发生这种情况是因为，当您滚动页面时，会重复调用animate函数。因此，在滚动页面时使用animate函数不是一个好主意。
但是，您可以使用变量来避免重复调用animate函数。请参阅以下示例：
$( document ).ready( function()
var scrolled = false;
$( window ).scroll( function ()
var scroll = $( window ).scrollTop();
if ( scroll != 0 && !scrolled )
scrolled = true;
$( '.logo' ).animate( margin: '0', 'fast' );
else if ( scroll == 0 && scrolled )
scrolled = false;
$( '.logo' ).animate( margin: '9px 0', 'fast' );
)
)body
margin: 0;
padding-bottom: 100%
.logo
display: block;
position: fixed;
margin-top: 9px;
width: 300px;
height: 100px;
background: #eee url('https://cdn1.imggmi.com/uploads/2019/2/14/01eb69be0f0914245ef9a681d6d05172-full.png') no-repeat;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-ms-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href='http://testing.coreintegrator.com/' class='logo'></a>另一答案
1.）您需要debounce执行该函数以确保渲染不会被阻止
2.）您可以将ms中的值设置为animate函数中的第二个参数
另一答案
你正在将过多的动画序列推入当前堆栈，这会使页面响应缓慢，因为最后一个序列还没有完成...我使用了stop（）方法。 stop（）方法会破坏任何以前的动画并在任何时间点初始化一个新动画......所以在你的情况下你可以这样做......
$(window).scroll(function (event)
var scroll = $(window).scrollTop();
if(scroll != 0)
$('.logo').stop().animate(padding: "0px 0px"); //add the stop
else
$('.logo').stop().animate(padding: "9px 0px"); //add here too..
);
如果我猜对了，你应该有一个平滑的序列。
另一答案
问题是你要多次调用动画，所以动画是堆栈需要先完成。
明智地调用动画，使用下面的代码并尝试
var lastScrollValue = 0;
$(window).scroll(function (event)
var scroll = $(window).scrollTop();
if(lastScrollValue==0)
$('.logo').animate(padding: "0px 0px");
else if(scroll==0 && scroll!=lastScrollValue)
$('.logo').animate(padding: "9px 0px");
lastScrollValue = scroll;
);
$(function()
var lastScrollValue = 0;
$(window).scroll(function(event)
var scroll = $(window).scrollTop();
console.log(scroll);
if(scroll != 0)
$('.logo2').animate(padding: "0px 0px");
else
$('.logo2').animate(padding: "9px 0px");
var scroll = $(window).scrollTop();
if (lastScrollValue == 0)
$('.logo').animate(
padding: "0px 0px"
);
else if (scroll == 0 && scroll != lastScrollValue)
$('.logo').animate(
padding: "9px 0px"
);
lastScrollValue = scroll;
);
).logo
position:fixed;
top:0;
background: red;
.logo2
position:fixed;
left :100px;
top:0;
background: red;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="logo">LOGO</div>
<div class="logo2">WRONG LOG0 animation</div>
<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll以上是关于几秒后，Jquery动画（）响应非常缓慢的主要内容，如果未能解决你的问题，请参考以下文章