Question

我正在制作一个切换页脚，它是width:100%;。

我将其设置为max-width:670px，我希望它在切换动画之前扩展到100％宽度。这是我的代码： http://codepen.io/GCW/pen/ZYbvPO

如您所见，它有效。但是我必须设置maxWidth: '5000'以使其在大多数屏幕中都具有全宽。通过这种方式，我的动画不流畅，我的页脚非常快速地回到670px。我玩动画时间，但我确信有更好的方法来做到这一点。我想我的代码对于这个简单的操作来说太长了。

我也试过var window_width = $(window).width()然后.animate({ maxWidth: window_width }..并且效果很好，直到我调整窗口大小，因为它有一个精确的宽度值，而不是百分比，所以它有一些固定的宽度。

Answer 1

您可以将css 100vw属性用于新浏览器，但对于较旧的浏览器，您可以使用jquery来获取窗口宽度。以下是我的调整代码，如下所示。

 (function($) {
    $(document).ready(function() {

        $('.nav-toggle').click(function(){

            var content_selector = $(this).attr('href');
            var my_switch = $(this); 

            //Added variable
            var viewPortWidth = $(window).outerWidth();

            if (my_switch.hasClass('close_toggle')) {
                    $(content_selector).slideToggle(function(){
                        $('.collapsing_footer').animate({
                        maxWidth: '670'}, 400);
                        my_switch.removeClass('close_toggle');
                    });   

                    //Remove resize event bind 
                    jQuery(window).unbind();

            } else { 


                //on resize adjust the max width
                jQuery(window).resize(function () {
                    //reset viewport width variable to current
                    viewPortWidth = $(window).outerWidth();
                     $('.collapsing_footer').css({ maxWidth : viewPortWidth });
                  console.log("here");
                });


                $('.collapsing_footer').animate({ maxWidth: viewPortWidth }, 600, 

                function() {
                    $(content_selector).slideToggle(
                        function(){
                         my_switch.toggleClass('close_toggle');
                        }
                    );

                    $('body').animate({ scrollTop: 999999 }, 700);

                });

            }

        });

    }); 
    })(jQuery);

如果您有浏览器版本检测，我建议您使用它来填充变量viewPortWidth。这是一篇关于vw css的文章，还包含浏览器支持。 http://css-tricks.com/viewport-sized-typography/

Answer 2

您可以尝试使用视口宽度：

maxWidth: '100vw'

jQuery：切换页脚，从#px调整到100％宽度和后退

2 个答案: