新值.resize

Question

我第一次做到這一點，它的工作原理：

$(document).ready(function() { 
    var delay = 0; 
    var myLeft = $("#container").offset().left; 
    var myRight = myLeft + $("#container").outerWidth(); 
    var newWidth = $("#container").width(); 
    $("#head").animate({width: newWidth}); 
    $("#head").css("marginLeft", myLeft).css("marginRight", myRight); 
    $('.box').each(function() { 
     $(this).delay(delay).fadeIn(); 
     delay += 250; 
    }); 
}); 

然後我運行這一點，但它簡化版，工作，理想情況下它會在每個窗口大小調整工作：

function doSomething() { 
    var myLeft = $("#container").offset().left; 
    var myRight = myLeft + $("#container").outerWidth(); 
    var newWidth = $("#container").width(); 
    $("#head").animate({width: newWidth}); 
    $("#head").css("marginLeft", myLeft).css("marginRight", myRight); 
    }; 

var resizeTimer; 
$(window).resize(function() { 
    clearTimeout(resizeTimer); 
    resizeTimer = setTimeout(doSomething, 100); 
}); 

但它看起來像新的尺寸不適用每次有一個窗口調整大小，任何人？

Answer 1

窗口調整大小，發生之前，因此設定新的值訣竅是包括用於窗口resize事件延遲定時器：

var delay = (function(){ 
    var timer = 0; 
    return function(callback, ms){ 
    clearTimeout (timer); 
    timer = setTimeout(callback, ms); 
}; 

}）;

$(window).resize(function() { 
delay(function(){ 
    if ($("#head").width() != $("#container").width()){ 
     var myLeft = $("#container").offset().left; 
     var newWidth = $("#container").innerWidth(); 
     var myRight = $(window).width() - ($("#container").offset().left + $("#container").outerWidth()); 
     $("#head").animate({ width: newWidth, marginLeft: myLeft, marginRight: myRight }, "fast"); 
    } 
}, 1000); 
}); 

Answer 2

嘗試

$("#head").css("margin-left", myLeft + "px").css("margin-right", myRight + "px"); 

您還縫使用不必要的「每個」子句你沒有做每盒什麼，只在#head。你確定你的意思是？