有效地使用Enquire.js和媒體查詢爲jquery動畫

嗨，我一直在試圖讓我的頭圍繞如何使用enquire.js。我使用.mouseenter（function（）來激活函數.show和.hide。但是當你在平板電腦上查看它時，移動.mouseenter變得多餘。我想告訴jquery在屏幕寬度達到我的屏幕時顯示div 。媒體查詢有效地使用Enquire.js和媒體查詢爲jquery動畫

@media only screen and (min-width : 769px) and (max-width : 959px)

下面是一個例子

這裏是我的jQuery：

$(".slidingDiv_how").hide(); 
      $(".show_sub").show(); 

      $('.show_sub').mouseenter(function(){ 
      $(".slidingDiv_how").slideDown(); 
      return false; 
      }); 
      });

這裏是我的html

<div class"right-wrapper"><!--How wrapper --> 
           <div id="how_we" class="show_sub1" style="cursor: hand; cursor: pointer;"> 
            <h1><a href="#">How We Work:</a></h1> 
             <div class="slidingDiv_how"> 
              <p class="show_sub1">The heat of the vertical rays of the sun was fast making our horrible prisons unbearable, so that after passing a low divide, and entering a sheltering forest, we finally.</br> 
       www.dochouse.co.uk</p> 

             </div> <!-- end slidingdiv2 -->

我已閱讀文檔，並不真正瞭解要放置哪個部分。任何幫助將非常感激。

來源

2013-03-13 user2086702

希望這有助於，幾乎從最新的版本

V2.0.0（2013年4月17日）

聽和火docs
enquire.register("screen and (min-width : 769px) and (max-width : 959px)", { 
    match : function() { 
     $(".slidingDiv_how").show();    
    }, 
    unmatch : function() { 
     $(".slidingDiv_how").hide(); 
    } 
}).listen(); 
其變化直接複製從v2開始不再需要，並且從API中刪除了。刪除代碼中的任何用法都是必需的。此外，由於查詢不再依賴調整大小事件，您必須確保您的polyfill支持matchMedia.addListener。的詳細信息可以在舊版瀏覽器部分找到。

來源

2013-03-29 10:56:43

有效地使用Enquire.js和媒體查詢爲jquery動畫

回答

相關問題