使用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事件的奇怪延遲

回答

相關問題