jQuery：切换页脚，从#px调整为100％宽度，并返回

我正在制作切换页脚，它是width:100%;。jQuery：切换页脚，从#px调整为100％宽度，并返回

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

正如你所看到的，它的工作原理。但我必须在各种屏幕上设置maxWidth: '5000'以使其具有全宽。这样，我的动画就不流畅了，我的页脚可以非常快地回到670px。我玩动画时间，但我相信有更好的方法来做到这一点。我想我的代码对于这个简单的动作也太长了。

我也试图与var window_width = $(window).width()然后.animate({ maxWidth: window_width }..和它工作得很好，只是直到我调整我的窗口，因为它有一个精确的宽度值，而不是百分比，所以它有一些固定的宽度。

来源

2014-12-02 GCW

那么确切的问题是什么？你的动画是不是流动的，因为5000和670的巨大差距？那是对的吗？ – 2014-12-02 17:39:46

对。我正在寻找一种方法来获得100％的宽度没有那个疯狂的5000值 – GCW 2014-12-02 17:42:33

您可以使用新的浏览器的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/

来源

2014-12-02 17:52:34

正确，但是如果在1000px宽度的情况下切换菜单，例如，您将浏览器调整为1500px，菜单保留在1000px，因为存储的viewPortWidth的值 – GCW 2014-12-02 18:20:27

这是正确的，不适合用于弥补浏览器调整大小。 – 2014-12-02 18:21:44

我添加了一个窗口重新大小事件，它现在可以调整浏览器调整大小时的最大值。当菜单未打开时，它也会清除该事件，以防止670最大变化。 – 2014-12-02 18:28:27

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

maxWidth: '100vw'

来源

2014-12-02 17:43:59 pschueller

哦，是的！有用！：）谢谢！ – GCW 2014-12-02 17:48:20

jQuery：切换页脚，从#px调整为100％宽度，并返回

回答

相关问题