Question

先看看以下小提琴，然后尝试叠加标题。关闭div并调整窗口大小时，#overlay div开始跳转，即使关闭也会变为可见。这是由#overlay div中的文本引起的，因为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/

Answer 1

只需确保隐藏并正确显示元素，而不是将其向上滑动，您将完全避免此问题：

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

jQuery：div和window的height（）调整大小

1 个答案: