javascript - 使用 jquery 更改 css 属性时防止触发窗口调整大小事件

Question

我在我的页面上添加了一个窗口调整大小事件每当页面大小更改时都会调用它。

但是当我使用 jquery css 更新页面内 div 元素的 css 值并设置动画时，它会自动触发窗口调整大小事件。

这只发生在 IE 上

我想防止通过 animate 或 css 方法手动更改大小时执行调整大小事件

这是我的代码

调整窗口大小

window.onresize=function(){ ... };

改变div大小

$('div#divtest').css({ 'position': 'absolute', 'z-index': '1', 'background-color': '#f6f6f6' }).animate({
                    width: '20%', 
                    height : $('div#divother').height() - 29
                }, 0);

编辑:我不想对调整大小事件进行任何更改，原因是它在页面方面有所不同，所以我必须对所有现有事件进行更改

我可以暂时关闭它

Answer 1

您可以通过以下方式实现:

在应用 css 动画之前设置一些标志，如下所示:

$('div#divtest').data("css_animation", true); //set the flag

$('div#divtest').css({ 'position': 'absolute', 'z-index': '1', 'background-color': '#f6f6f6' }).animate({
    width: '20%', 
    height : $('div#divother').height() - 29
}, 0,function() {
    // Animation complete.
    $('div#divtest').data("css_animation", false); //reset the flag
});

在 resize 中，我们可以检查是否设置了标志，如下所示:

window.onresize=function(){ 

    var flagValue = $('div#divtest').data("css_animation"); //fetch the flag value
    //don't do anything if resize is getting called via css animation
    if(flagValue === true)
        return;
    ... 

};