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

尝试

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

你也可以使用不必要的“each”子句，因为你没有为每个盒子做任何事情，只在#head上。你确定你的意思吗？

Answer 2

窗口调整大小在设置新值之前发生，因此诀窍是包含窗口调整大小事件的计时器延迟：

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);
});

$（window）.resize上的新值

2 个答案: