javascript - jQuery动画div不工作

Question

我有这个 jsFiddle：http:
//jsfiddle.net/uM68j/

当我单击其中一个链接时，该栏应滑动到顶部，但它所做的只是跳到顶部，而不是动画。我怎样才能让它动画？

我认为实际上是CSS导致了这种情况：

JS：

$(".nav-bar div, .nav-bar div a").click(function () {
    $(".nav-bar").animate({
        top: "0"
    }, "fast");
    return false;
});

CSS：

.nav-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: #ededed;
}

Answer 1

您尚未top在 CSS 中设置值，因此您正在从autoto动画0，这不起作用。但是，您确实设置了一个bottom值，所以改为动画：

$(".nav-bar div, .nav-bar div a").click(function () {
    $(".nav-bar").animate({
        bottom: $(window).height() - 100
    }, "fast");
    return false;
});

小提琴