jQuery：高度（）的div和窗口调整大小

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