jQuery動畫在窗口調整大小上的大延遲

Question

我的主要內容左右各有2個div。 如果用戶縮小瀏覽器窗口，我想縮小div，因此它們不會覆蓋內容。 相反，如果用戶使窗口足夠大，我希望它們再次擴展。

為此，我創建了以下代碼：

$(window).resize(function() {
  var windowwidth = $(window).width();

  if(windowwidth < 1400){
    $('#sliderholder').animate({width:'25px'});
    $('#contactholder').animate({width:'25px'});
  }

  if(windowwidth > 1400){
    $('#sliderholder').animate({width:'222px'});
    $('#contactholder').animate({width:'222px'});
  }

});

但這不能正常工作-動畫似乎是隨機發生的，或者非常延遲。

有人知道如何改善嗎？

編輯：做了一些實驗，發現它被延遲，而不是同步

Answer 1

我在上面添加了.stop() ，似乎可以解決它。

$(window).resize(function() {
  var windowwidth = $(window).width();

  if(windowwidth < 1400){
    $('#sliderholder').stop().animate({width:'25px'});
    $('#contactholder').stop().animate({width:'25px'});
  }

  if(windowwidth > 1400){
    $('#sliderholder').stop().animate({width:'222px'});
    $('#contactholder').stop().animate({width:'222px'});
  }

});