2

画面の解像度に応じて jQuery コードを変更しようとしています。メイン コンテンツ エリアをアニメーション化していますが、さまざまな画面サイズで幅を変更したいと考えています。

オンラインで多くの検索を行った後、役立つ可能性のあるものを見つけましたが、機能させることができません。変更が必要なコード スニペットは次のとおりです。これは Match Media と呼ばれ、CSS3 メディア クエリのようなもので、JavaScript 専用です。

  var mq = window.matchMedia( "(max-width: 320px)" );
         if (mq.matches) {
           menuLink.click(function(){
            innerContent.css("display", "none");
            contentWrapper.stop().animate(
                    {width: '40em'},
                    {duration:1200,easing: 'easeOutBack'}
            );
            closeButton.stop().delay(800).animate({opacity:'1'},600,'easeInSine');
            $("#fadeBg").fadeIn();
         });
          }

ここで必要な主なことは、40 em の contentWrapper をアニメーション化するために max-width 基準が満たされたときです。しかし、何も起こっていないようです。

前もって感謝します

4

3 に答える 3

3

ドキュメントの準備ができてこれを行っていますか？

$( function(){
  ...
  var mq = window.matchMedia( "(max-width: 320px)" );

} );
于 2012-07-06T15:22:06.303 に答える
1

リスナーを追加するとうまくいきました。

  var mq = window.matchMedia( "(max-width: 320px)" );
  mq.addListener(function(){
    if (mq.matches) {
      ...
    }
  });

すべて $(function(){...}); にラップされています。一致したときにjQueryアニメーションを使用したためです。

于 2013-05-08T17:16:04.717 に答える