jquery - 在窗口调整大小时为元素设置动画会延迟触发

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

之前的动画会随着新动画的触发而继续运行，因此您的动画队列可能会随着 resize 事件的反复触发而填满。

用于.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;
    }
}