使用js .resize事件的奇怪延迟

请原谅我，因为我的问题可能是愚蠢的，但我是一个初学者在脚本编写，并且真的需要一些帮助。当按下按钮时，我想要一个元素从页面上方向下滑动，并在再次按下按钮时向后滑动。这个元素应该填充它放置的容器的100％，所以首先我用.css（'height'）来收集容器的高度，然后将这个值设置为元素大小及其位置。然后去一些动画效果。使用js .resize事件的奇怪延迟

$(document).ready(function(){ 
    //gather dimentions 
    var x=($("#screenctr").css("height"));  
    var y=parseFloat(x); 
    var z=(y*-1 + 'px'); 
    $(".roll").css("height", x); 
    $(".roll").css("top", z); 
    //slides from above 
    $(".bloop").click(function(){ 
    $(".roll").animate({ 
     top:'0px'}, "slow"); 
    $(".bloop").css("display","none"); 
    $(".bzook").css("display","block"); 
    }); 
    //slides back 
    $(".bzook").click(function(){   
    $(".roll").animate({ 
     top:z}, "slow"); 
    $(".bzook").css("display","none"); 
    $(".bloop").css("display","block"); 
    }); 
    });

它工作正常。但我也希望它在窗口大小调整时改变大小和位置。所以我写了相同的脚本 $(window).resize(function(){}

它仍然有效，但很奇怪。起初，当页面刚刚加载时，一切正常，并且在第一次调整大小后，它也从正确的上方落下。但是从那时起，当它被隐藏起来时，几秒钟内没有任何事情发生，然后它开始非常缓慢地向上拖动。再次下降 - 没问题，长时间延迟后再次拖延。有没有人知道它可以造成什么？谢谢。

这里是页：http://production.zukaty.ru/

来源

2013-05-28 Sergei

很可能是因为每次调整大小事件发生时都会启动一次动画，每次调整大小可能会有数百次（如果不是数千次）。我建议在resize事件上实施节流，以便在用户完成调整大小时进行动画制作。 –

当您使用.animate（）方法$（窗口）.resize（）增加.stop（）方法，因为在$（窗口）函数.resize（）将被称为每秒次数和.stop（）停止以前的动画，所以用这样的：

$(window).resize(function(){ 
    $(".roll").stop().animate({ ... }); 
}

这应该解决您的问题。

来源

2013-05-28 19:38:01 LorDex

.stop方法行不通，谢谢！ – Sergei

在这种情况下，upvote将不胜感激:) – LorDex

使用js .resize事件的奇怪延迟

回答

相关问题