Question

我在导航元素上制作了一个小动画，但我遇到了一个问题。动画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并隐藏溢出来解决这个问题。但这种方式看起来非常讨厌，我不喜欢它。

Answer 1

您始终可以使用 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%;**
}

仅隐藏溢出底部内容

1 个答案: