Question

您好我一直试图了解如何使用enquire.js。我正在使用.mouseenter（function（）来激活函数.show和.hide。但是当你在平板电脑和移动设备上查看它时.mouseenter变得多余了。我想告诉jquery在屏幕宽度达到我的时候显示div媒体查询。

 @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 -->

我已阅读文档，并不真正了解要放入哪个部分。任何帮助将不胜感激。

Answer 1

希望这有帮助，几乎直接从docs

复制

enquire.register("screen and (min-width : 769px ) and (max-width : 959px)", {
    match : function() {
        $(".slidingDiv_how").show();            
    },
    unmatch : function() {
        $(".slidingDiv_how").hide();
    }
}).listen();

注意更新最新版本

v2.0.0（2013-04-17）
从v2开始不再需要监听和解雇，并且已经被丢弃来自API。在代码中删除它们的任何用法就是这样需要。此外，由于查询不再依赖于调整大小事件，您必须确保您的polyfill支持matchMedia.addListener。的细节这可以在旧版浏览器部分找到。

有效地使用Enquire.js和媒体查询Jquery动画

1 个答案: