Question

我已经设置了一个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。

Answer 1

好的，我在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();
    }
});

如果需要outerWidth，也可以在jQuery中添加填充和边框。

（我也从css中删除了@media规则 - 不确定这是否会产生很大的不同：如果是这样，你也可以使用jQuery添加box-sizing等。）

Jquery调整计算小故障

1 个答案: