JQuery изменить размер расчета глюк

Question

JQuery изменить размер расчета глюк

0

Я установил вычисление ширины 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.

Alga 14 дек. 2013, в 15:12

Источник

0

Я не вижу сбоев при изменении размера: этот браузер специфичен? Если да, то в каком браузере это отображается?
dhc 14 дек. 2013, в 14:35
0

Я смотрю на это в Chrome.
Alga 14 дек. 2013, в 14:51

Теги:

jquery

width

window-resize

1 ответ

Ещё вопросы

Я не вижу сбоев при изменении размера: этот браузер специфичен? Если да, то в каком браузере это отображается?

dhc · Answer 1 · 2013-12-14T17-02-00.000Z

Хорошо, я вижу глюк немного больше в 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, если вам нужна внешняя ширина.

(Я также исключил правило @media из css - не уверен, что это имеет большое значение: если это так, вы можете добавить размер окна и т.д. С помощью jQuery).