Currently, I am facing a challenge while creating a small animation on a navigation element. The issue is that the content of the animated div should only be visible at the top of the nav element and not at the bottom. However, due to the larger height of the animated div compared to the nav element, it appears at the bottom instead. To visualize this problem, I have created a jsFiddle: http://jsfiddle.net/umc4c/
// Homepage navigation fadeIn + content block animation
$('#content_home').hide();
$('nav').hide().fadeIn(1200, function(){
var result = $("#content_home").outerHeight();
$('#content_home').animate({marginTop: -Math.abs(result)},1000);
$("#content_home").css("display", "block");
});
// Homepage navigation animation + url click event
$('nav a').click(function(event){
event.preventDefault();
var href = this.href;
$('nav').animate({
marginTop: '-650px'},
1000,
function(){
window.location = href;
});
});
To address this issue, I temporarily solved it by setting the height of the nav div to 650px with overflow hidden. However, this solution feels cumbersome and unsatisfactory to me.