1

メイン コンテンツの左右に 2 つの div が浮かんでいます。ユーザーがブラウザ ウィンドウを縮小した場合に div を縮小したいので、コンテンツをカバーしません。逆に、ユーザーがウィンドウを十分に大きくした場合は、それらを再び拡大したいと考えています。

これを行うために、次のコードを作成しました。

$(window).resize(function() {
  var windowwidth = $(window).width();

  if(windowwidth < 1400){
    $('#sliderholder').animate({width:'25px'});
    $('#contactholder').animate({width:'25px'});
  }

  if(windowwidth > 1400){
    $('#sliderholder').animate({width:'222px'});
    $('#contactholder').animate({width:'222px'});
  }

});

しかし、これは正しく動作しません - アニメーションがランダムに発生するか、非常に遅れているようです。

これを改善する方法を知っている人はいますか？

編集：いくつかの実験を行ったところ、同期がずれているのではなく、遅れていることがわかりました

4

1 に答える 1

1

上記に追加.stop()したところ、解決したようです。

$(window).resize(function() {
  var windowwidth = $(window).width();

  if(windowwidth < 1400){
    $('#sliderholder').stop().animate({width:'25px'});
    $('#contactholder').stop().animate({width:'25px'});
  }

  if(windowwidth > 1400){
    $('#sliderholder').stop().animate({width:'222px'});
    $('#contactholder').stop().animate({width:'222px'});
  }

});
于 2013-10-28T06:22:37.700 に答える