javascript - 窗口调整大小时 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'});
  }

});