我在导航元素上制作了一个小动画,但我遇到了一个问题。动画div的内容应仅在nav元素的顶部可见,而不是bot。但是动画div的高度大于nav元素的高度,因此动画div显示在导航的底部。我做了一个jsFiddle的情况:http://jsfiddle.net/umc4c/
// Homepage navigatie fadeIn + contentblok animatie
$('#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 navigatie animatie + url click event
$('nav a').click(function(event){
event.preventDefault();
var href = this.href;
$('nav').animate({
marginTop: '-650px'},
1000,
function(){
window.location = href;
});
});
我现在通过给导航div高650px并隐藏溢出来解决这个问题。但这种方式看起来非常讨厌,我不喜欢它。
答案 0 :(得分:0)
您始终可以使用 slideDown 代替动画。 这样div就会在滑动时展开,而不是仅仅移动div。
这是小提琴: http://jsfiddle.net/umc4c/21/
*请注意,您必须稍微改变一下css。您必须添加相对于nav类的位置。然后你必须添加底部:100%;到#content_home。
nav {
margin-top:400px;
width:500px;
background-color:grey;
height:120px;
**position:relative;**
}
#content_home {
padding:50px;
position:absolute;
z-index:-1;
background-color:#000;
height:200px;
width:200px;
color:#fff;
**bottom:100%;**
}