jquery - 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

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

因此，您可以分配一个在调整窗口大小时触发的处理程序。

IE

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

Answer 2

尝试将您的调整大小功能修改为这样的东西

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 3

看起来您正在尝试执行以下操作：

$(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。这当然可以用 <、== 等进行修改。

Answer 4

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

我建议限制此功能，因为每次更改像素大小时都会触发它。所以使用像 underscorejs 这样的东西。这将仅每 60 帧/秒触发一次代码。

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