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()ブールプロパティではなく、イベントです。

したがって、ウィンドウのサイズが変更されているときに起動するハンドラーを割り当てることができます。

すなわち

$(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のようなものを使用してください。これにより、1秒あたり60フレームごとにのみコードが起動されます。

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