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