我正在制作切换页脚，它是 width:100%;。
我将它设置为 max-width:670px，我希望它在切换动画之前扩展到 100% 宽度。
这是我的代码笔:
http://codepen.io/GCW/pen/ZYbvPO
如您所见，它有效。但我必须设置 maxWidth: '5000' 以使其在几乎所有类型的屏幕中都具有全宽。这样，我的动画不流畅，我的页脚很快回到 670px。我玩过动画时间，但我确信有更好的方法来做到这一点。
我想我的代码对于这个简单的操作来说也太长了。
我还尝试了 var window_width = $(window).width() 然后是 .animate({
maxWidth: window_width }.. 它运行良好，直到我调整窗口大小，因为它有一个精确的宽度值，而不是百分比，所以它有一些固定宽度。
最佳答案
您可以为新浏览器使用 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。 Here is an article about vw css 并且还包含浏览器支持。 http://css-tricks.com/viewport-sized-typography/
关于javascript - jQuery : toggle footer, 将大小从#px 调整为 100% 宽度并返回，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27255444/