jQuery: высота () элемента div и изменение размера окна

Question

jQuery: высота () элемента div и изменение размера окна

0

сначала взгляните на следующую скрипту и попробуйте заголовок оверлея. Когда вы закрываете div и изменяете размер окна, #overlay div начинает прыгать вокруг, становится видимым, даже если он закрыт. Это вызвано текстом в div #overlay, так как div не имеет фиксированной высоты и реагирует. Как я могу изменить jQuery и остановить этот эффект?

var overlayState = 'close';
var overlay = $('#overlay');

$(window).resize(function () {

    if (overlayState == 'close') {
        overlay.css({
            display: 'block',
            marginTop: -overlay.height()
        });
    } else {
        overlay.css({
            display: 'block',
            marginTop: 0
        });

    }
});

$(document).ready(function () {
    // var overlay = $('#overlay');
    var overlayControl = $('.overlay-controls a');
    var overlayicon = $('.overlay-controls span');

    overlay.css({
        display: 'block',
        marginTop: -overlay.height()
    });

    // var overlayState = 'close';

    overlayControl.toggle(function () {
        overlayState = 'open';
        overlayicon.addClass('open');
        overlay.animate({
            marginTop: 0
        }, 600, 'easeInOutQuart');

    }, function () {
        overlayState = 'close';
        overlayicon.removeClass('open');
        overlay.animate({
            marginTop: -overlay.height()
        }, 900, 'easeOutBounce');

    });
});

И здесь FIDDLE: http://jsfiddle.net/RS9yb/4/

paelzer 28 нояб. 2013, в 20:33

Источник

0

я вижу это правильно
Santiago Rebella 28 нояб. 2013, в 18:55

Теги:

jquery

resize

height

1 ответ

Ещё вопросы

adeneo · Answer 1 · 2013-11-28T16-10-00.000Z

Просто убедитесь, что вы скрываете и показываете элемент правильно, а не просто выдвигаете его, и вы полностью избегаете проблемы:

overlayControl.toggle(function () {
    overlayState = 'open';
    overlayicon.addClass('open');
    overlay.show().animate({
        marginTop: 0
    }, 600, 'easeInOutQuart');

}, function () {
    overlayState = 'close';
    overlayicon.removeClass('open');
    overlay.animate({
        marginTop: -overlay.height()
    }, 900, 'easeOutBounce', function() {
        $(this).hide();
    });
});

FIDDLE