Jquery調整大小計算故障

我已經設置了一個jQuery寬度計算來調整我的窗口的大小，它一切正常，但我發現，當我調整和拉伸時，有一個'故障'或分裂秒的容器的寬度變化，它們重疊並留下很大的差距。我明白這是因爲jQuery正在執行它的計算，但這是正常的，並且無論如何都有它嗎？Jquery調整大小計算故障

if ($("#Grid").css("margin-bottom") === "1px") { 
    oneCol(); 
} 

if ($("#Grid").css("margin-bottom") === "0px") { 
    twoCol(); 
} 

function oneCol() { 
    $('#middle').hide(); 
    $('#Grid').css('width', '100%').css('width', '-=170px'); 
} 

function twoCol() { 
    $('#middle').show(); 

    $('#middle').outerWidth(function() { 
     return ($(this).parent().width() * 0.5) - $('#left').outerWidth()/2; 
    }); 

    $('#Grid').outerWidth(function() { 
     return ($(this).parent().width() * 0.5) - $('#left').outerWidth()/2; 
    }); 
} 


$(window).on('resize', function() { 
    if ($("#Grid").css("margin-bottom") === "1px") { 
     oneCol(); 
    } 

    if ($("#Grid").css("margin-bottom") === "0px") { 
     twoCol(); 
    } 
});

這是我的JSFiddle。

來源

2013-12-14 Alga

我沒有看到調整大小的小故障：這是特定於瀏覽器的？如果是這樣，這是什麼瀏覽器出現？ – dhc

我在Chrome上查看它。 – Alga

好的，我在Chrome上看到了更多的小故障。不知道你是否能完全消除它，但它看起來很多，通過優化調整程序更好：

function oneCol() { 
    $('#middle').hide(); 
    $('#Grid').width($(window).width() - $('#left').outerWidth()); 
} 

function twoCol() { 
    $('#middle').show(); 
    var w = ($(window).width() - $('#left').outerWidth())/2; 
    $('#middle').width(w); 
    $('#Grid').width(w); 
} 


$(window).on('resize', function() { 
    if ($(window).width()<100) { 
     oneCol(); 
    } else { 
     twoCol(); 
    } 
});

您可以在jQuery的添加填充和邊框也一樣，如果你需要outerWidth。我也從css中消除了@media規則 - 不確定這是否會產生很大的不同：如果是這樣，您可以使用jQuery添加box-sizing等）。

來源

2013-12-14 18:17:12 dhc

Jquery調整大小計算故障

回答

相關問題