0

我已经为此苦苦挣扎了一段时间。基本上我有一个特定高度的 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 刷新？我已经尝试了所有我知道的方法，并且已经完成了从切断页面到使页面连续多次像篮球一样弹跳的所有事情。

先感谢您！

4

1 回答 1

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);
于 2013-01-16T23:52:15.707 回答