在窗口上設置動畫元素調整大小遲到時間

Question

我正在檢查調整大小時的窗口高度，並在元素位於特定高度內時對其進行動畫處理。但是，在完成瀏覽器窗口的大小調整後，該功能的啓動時間通常會延遲4或5秒。我一旦完成調整大小，就需要它啓動。當我調整大小會更好。任何幫助，將不勝感激。謝謝。

代碼是：

$(window).resize(function() { 
    adjustPanel(); 
}); 

adjustPanel = function() { 
    if ($(window).height() > 920) { 
     $('#search-board-wrap').animate({ 
      height: 795, 
      marginTop: 795 
     }); 
    } else { 
     $('#search-board-wrap').animate({ 
      height: 650, 
      marginTop: 650 
     }); 
    } 
}; 

Answer 1

以前的動畫保持運行爲新的被觸發，所以你的動畫隊列可能滿了，調整大小事件觸發了個遍。

使用.stop()停止當前的動畫，並清除隊列：

$('#search-board-wrap').stop(true, true).animate(... 

老實說，我只想CSS媒體查詢，擺脫這一切的JS：

#search-board-wrap { 
    height: 795px; 
    width: 795px; 
} 

@media all and (max-height: 920px) { 
    #search-board-wrap { 
     height: 650px; 
     width: 650px; 
    } 
}