jquery - サイズ変更時にjquery呼び出しを有効/無効にします

Question

私はレスポンシブサイトを構築しているので、ウィンドウのサイズに応じて異なる機能が必要です。

したがって、画面の幅が964ピクセル未満の場合は、jquery呼び出しを無効にします。964pxを超える場合は、同じ呼び出しを有効にします。

これは私が得たものです：http： //jsfiddle.net/frogfacehead/2Mdem/1/

問題は、無効化部分が機能しないことです。一度有効にすると、画面が964pxを下回っても無効になりません。

何か案は？

Answer 1

画面サイズが 964px を超えると、アニメーションが .test 要素にバインドされるため、バインドを解除するには、次のようにする必要があります

else {
        $body.html('Viewport is ' + mywidth + 'px wide. <span class="disable">[Disable Animation]</span>');
        $(".test").unbind("hover");
    }

Answer 2

これらすべてのリソースを使用して、ページのサイズが変化したときにホバー関数をその要素にアタッチするのではなく、これらのコールバック関数の実行中にページのサイズをチェックしてみませんか?

$(".test").hover(function() {
            if (width > 964) {
                $(this).animate({
                    width: "100px"
                })
            }
        }, etc.

問題は、ホバー イベントを処理する関数を追加することですが、その関数が削除されることはありません。ページの幅が変化するにつれて、繰り返し追加しています。一度追加するだけで、その関数のハンドラー内で何が起こるかをチェックします。正しく動作することのボーナスとして、もう少し効率的である必要があります。

Answer 3

.test最初の問題は、サイズ変更イベントのバインディングに基づいて、ホバー/アニメーション バインディングのキューをロードしていることです。

実装は改善される可能性がありますが (以下を参照)、サイズ変更が完了したときに関数呼び出しを起動する場合は、次のことを考慮してください。

var resizeTimeout;
$win.resize(function() {
  clearTimeout(resizeTimeout);
  // handle normal resize as needed
  resizeTimeout = setTimeout(function() {
    // handle after finished resize
    checkwidth($win.width());
  }, 250); // delay by quarter second
});

このアプローチを検討できます。

// pull hover binding out, setup once to prevent building up queue
$(".test").hover(function() {
  if( $(".test").data('annimate') ){
    $(this).animate({
      width: "100px"
    });
  }
}, function() {
  if( $(".test").data('annimate') ){
    $(this).animate({
      width: "50px"
    });
  }
});

function checkwidth(mywidth) {
  if (mywidth > 964) {
    $body.html('Viewport is <strong>' + mywidth + 'px</strong> wide. <span class="enable">[Enable Animation]</span>');
    // set flag to allow annimation
    $(".test").data('annimate', true);
  } else {
    $body.html('Viewport is ' + mywidth + 'px wide. <span class="disable">[Disable Animation]</span>');
    // set flag to prevent annimation
    $(".test").data('annimate', false);
  }
}