调整浏览器大小时，jQuery像媒体查询一样? [英] jQuery Behave like Media Queries when Resizing Browser?

问题描述

我一直为此苦苦挣扎.基本上，我有一个div(#memberrevealwrapper)，它是一个特定的高度，除非视口的宽度小于790px，那么它就是另一个高度. (这是一个自适应的网页设计)

I've been struggling with this for a while. Basically I have a div (#memberrevealwrapper) that is a specific height unless the viewport is less than 790px in width, then it is another height. (It's a responsive web design)

现在，#memberrevealwrapper使用jQuery进行了动画处理，使其功能类似于单击时从浏览器顶部弹出的拉标签，然后再次单击将其回滚.

Now, #memberrevealwrapper is animated using jQuery to make it function like a pull tab that comes from the top of the browser upon click and then click again and it rolls back up.

这是我的jQuery:

Here is my jQuery:

<script>
    $(document).ready(function() {
        $('#memberloginrevealwrapper').animate({ marginTop: '-75px'}, 200);
        $('#memberloginlink a').toggle(
            function(){
                $('#memberloginrevealwrapper').animate({ marginTop: '0' }, 500);
            },
            function(){
                $('#memberloginrevealwrapper').animate({ marginTop: '-75px'}, 500);
            }
        );
    });

    $(document).ready(function(){
        var pageWidth = $(window).width();  

        if ( pageWidth <= 790 ) {

            $('#memberloginrevealwrapper').animate({ marginTop: '-147px' }, 200);
            $('#memberloginlink a').toggle(
                function(){
                    $('#memberloginrevealwrapper').animate({ marginTop: '0' }, 500);
                },
                function(){
                    $('#memberloginrevealwrapper').animate({ marginTop: '-147px'}, 500);
                }
            );

        }; 
    });

</script>

这很好用，直到您调整浏览器的大小为止.调整浏览器大小时，它不会找到新的高度并重新调整高度.

This works great until you resize the browser. When you resize the browser, it doesn't find the new height and to readjust the height.

这是正在运行的网站:clients.januarycreative.com/PES.我指的是页面顶部的会员登录"标签.

Here is the site in action: clients.januarycreative.com/PES. I am referring to the "Member Login" tab at the top of the page.

有人知道调整浏览器大小后如何刷新jQuery吗?我已经尝试了所有我知道的方法，并且成功地完成了从剪裁页面到连续多次使页面像篮球一样弹跳的一切工作.

Anyone know how I can get jQuery to refresh when the browser is resized? I've tried everything I know how, and have managed everything from cutting off the page to making the page bounce like a basketball many times in a row.

提前谢谢！

推荐答案

您需要在浏览器调整大小时再次重新运行代码.您在那里所拥有的只是在页面加载时运行了一个代码.您需要一个循环(从技术上讲，该事件会在页面调整大小时反复触发).

You need to re-run the code over again as the browser resizes. What you have up there just runs the code one on page load. You need a loop (technically an event that fires over and over again as the page resizes).

您在这里:

function updateSize() {
    var pageWidth = $(window).width();  

    if ( pageWidth <= 790 ) {
        $('#memberloginrevealwrapper').animate({ marginTop: '-147px' }, 200);
        $('#memberloginlink a').toggle(
            function(){
                $('#memberloginrevealwrapper').animate({ marginTop: '0' }, 500);
            },
            function(){
                $('#memberloginrevealwrapper').animate({ marginTop: '-147px'}, 500);
            }
        );
    }
}

$(window).resize(updateSize);

这篇关于调整浏览器大小时，jQuery像媒体查询一样?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！