jQuery：仅当窗口被调整大小时触发事件

Question

如果正在调整窗口大小，我想更改属性。如何在调整大小后返回到原始属性？

$(document).ready(function() { 
    $('div').css('do 1'); 
}); 

$(window).resize(function(){ 
    $('div').css('do 2 and when resize is finished go back to 1'); 
}); 

Answer 1

尝试修改您的调整大小功能，这样的事情

http://jsfiddle.net/Varinder/U3MKP/

下面是代码（以防万一拨弄链接不起作用）

修改

$(document).ready(function() { $('div').css('do 1'); }); 

var t; 
$(window).resize(function() { 
    clearTimeout(t); 
    $('div').css('do 2'); 
    t = setTimeout(function() { 
    //resize end (sort-of-hacky) event fires here. 
    $('div').css('do 1'); 
    }, 100); 
}); 

Answer 2

.resize()是一个事件，而不是一个布尔属性。

所以你可以指定一个处理程序，当窗口被调整大小时触发。

即

$(window).resize(function() { 
    $('body').prepend('<div>' + $(window).width() + '</div>'); 
}); 

Answer 3

$(window).on("resize" , function(){ 
// do something 
}); 

我建议节流这个功能，因为它的每一个像素大小改变时被解雇。所以使用像underscorejs这样的东西。这将仅每60帧每秒触发代码。

$(window).on("resize" , _.throttle(function(){ 
    // do something 
} , 1000/60)); 

Answer 4

它看起来像你正在尝试做的是这样的：

$(window).resize(function() { 
    var n = $(window).width; 
    var trigger_num = 1000; 

    if (n > trigger_num) { 
    $('div').css('do something'); 
    } 
    else { 
    $('div').css('do something else'); 
    } 
}); 

触发数基本上是定义在窗口超过一定大小来触发CSS的数字。这当然与<，==等