Question

我一直在努力解决这个问题。基本上我有一个div（#memberrevealwrapper）是一个特定的高度，除非视口的宽度小于790px，那么它是另一个高度。（这是一个响应式网页设计）

现在，#memberrevealwrapper使用jQuery进行动画制作，使其功能类似于拉动标签，点击后从浏览器顶部发出，然后再次单击并重新启动。

这是我的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>

在您调整浏览器大小之前，这很有用。当您调整浏览器的大小时，它找不到新的高度并重新调整高度。

以下是运营中的网站：clients.januarycreative.com/PES。我指的是页面顶部的“会员登录”标签。

任何人都知道如何在调整浏览器大小时让jQuery刷新？我已经尝试过我所知道的一切，并且已经完成了从切断页面到让页面连续多次像篮球一样反弹的所有内容。

提前谢谢！

Answer 1

您需要在浏览器调整大小时重新运行代码。你有什么只是在页面加载时运行代码一。你需要一个循环（技术上是一个在页面调整大小时反复激发的事件）。

你走了：

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表现得像媒体查询？

1 个答案: