與匹配媒體jQuery媒體查詢

我想改變我的jQuery代碼取決於屏幕分辨率。我正在爲主要內容區域設置動畫，並希望在不同的屏幕尺寸上更改它的寬度。與匹配媒體jQuery媒體查詢

經過大量的在線搜索，我發現了一些可能有用的東西，但是我無法得到它的工作。這裏是需要改變的代碼片段。它被稱爲匹配媒體，類似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(); 
     }); 
      }

我想在這裏的主要事情是當最大寬度標準滿足動畫contentWrapper爲40時。但似乎沒有任何事情發生。

在此先感謝

來源

2012-07-06 suludi

你準備好了嗎？

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

});

來源

2012-07-06 15:22:06 powerfade917

是，另呼籲動畫內容上方。 – suludi 2012-07-06 15:31:48

當我添加一個監聽器時，它與我一起工作。

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

所有包裹在$（function（）{...}）;因爲我匹配時使用了jQuery動畫。

來源

2013-05-08 17:16:04

這一個將工作。

$(function() { 

//1) create a function 
     var handleMatchMedia = function(md) { 
      if (md.matches) { 
       // your code 
      } else { 
       // your code 
      } 
     } 
     var mq = window.matchMedia("(max-width: 768px)"); 

// 2) call the function 
     handleMatchMedia(mq); 


//3) call the addListener function 
     mq.addListener(handleMatchMedia); 
     });

P.S.可以在Typescript中找到addListener函數，因此請確保您下載了Typescript。

也看過這篇文章：

http://blog.astaz3l.com/2013/11/27/matchmedia/

來源

2014-11-14 02:57:47

與匹配媒體jQuery媒體查詢

回答

相關問題