Question

所以我有4个媒体查询，我怎么去触发这些。到目前为止，他们正在解决我的其余部分。

function checkPosition() {
    if (window.matchMedia('(min-width: 480px) and (max-width: 787px)').matches) {
        $('.box').hover(
            function(){
                $(this).find('.project').filter(':not(:animated)').animate({ height: "100%" }, 400);
            }, function() {
                $(this).find('.project').animate({ height: "66px" }, 200);
            }
        );
    } else if(window.matchMedia('(min-width: 788px) and (max-width: 979px;)').matches) {
        $('.box').hover(
            function(){
                $(this).find('.project').filter(':not(:animated)').animate({ height: "100%" }, 400);
            }, function() {
                $(this).find('.project').animate({ height: "83px" }, 200);
            }
        );
    } else if (window.matchMedia('(max-width: 787px)').matches){
        $('.box').hover(
            function(){
                $(this).find('.project').filter(':not(:animated)').animate({ width: "100%" }, 400);
            }, function() {
                $(this).find('.project').animate({ width: "150px" }, 200);
            }
        );
    } else {
        $('.box').hover(
            function(){
                $(this).find('.project').filter(':not(:animated)').animate({ height: "100%" }, 400);
            }, function() {
                $(this).find('.project').animate({ height: "76px" }, 200);
            }
        );
    }
}

我真的想触发相同的高度，但后来回去

Answer 1

首先，这里有很多重构可以使这些代码更有效（从而更容易调试）。四个代码块各99％相似。此外，您的第二个媒体查询的;不属于那里，打破了那个。

这会更有效率：

function checkPosition() {
    //default value so you don't need the last 'else' clause
    var height = 76; 

    if (window.matchMedia('(min-width: 480px) and (max-width: 787px)').matches) {
        height = 66;
    } else if(window.matchMedia('(min-width: 788px) and (max-width: 979px)').matches) {
        height = 83;
    } else if (window.matchMedia('(max-width: 787px)').matches){
        height = 150;
    }

    setHeight(height);
}    

function setHeight(height) {
    $('.box').hover(
        function(){
            $(this).find('.project').animate({ height: "100%" }, 400);
        }, function() {
            $(this).find('.project').animate({ height: height + "px" }, 200);
        }
    );
}

checkPosition();

这似乎有效，但是每次浏览器宽度更改时，您还需要触发checkPosition（以重新检查哪些媒体查询匹配）。您可以使用此功能执行此操作：

$(window).resize(checkPosition);

如果仍然无效，请提供代码的功能示例，例如http://jsfiddle.net

如何触发四个jQuery媒体查询

1 个答案: