-1

私はクライアントのためにここにこのサイトを構築してアップロードしました。Twitter のブートストラップを使用してカスタマイズしました。私の問題は、リンクをアニメーション化するための jquery があるナビゲーションです。ただし、画面サイズが電話のサイズに落ちると、これを無効にして垂直リストに戻す必要があります。

ブートストラップには既にメディアクエリが組み込まれていることは知っていますが、これを行うにはどうすればよいですか。

サイトを確認し、ブラウザーをモバイル サイズに縮小すると、リスト ボタンが表示されますが、リンクは同じままです。

私が自分の主張を非常に明確にしたかどうかはわかりませんが、より多くの情報を尋ねてください.

ありがとう

アニメーションを担当するコードは次のとおりです。

$(document).ready(function () {

  //When mouse rolls over
  $(".blue").mouseover(function () {
    $(this).stop().animate({
      height: '100px'
    }, {
      queue: false,
      duration: 1200,
      easing: 'easeOutBounce'
    })
  });

  //When mouse is removed
  $(".blue").mouseout(function () {
    $(this).stop().animate({
      height: '50px'
    }, {
      queue: false,
      duration: 1200,
      easing: 'easeOutBounce'
    })
  });
});
4

1 に答える 1

1

matchMedia()小さなビューポートにのみアニメーションを適用してみてください:

if (window.matchMedia("(max-width: 480px)").matches) {
  /* do animation here */
}

もちろん、必要に応じて変更したり、他のプロパティを確認し480pxたりすることもできます。

于 2013-09-29T13:47:35.537 に答える