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

};