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;
    }
}

在窗口调整大小时动画元素会触发

1 个答案: