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

您没有在CSS中设置top值，因此您正在设置从auto到0的动画，这不起作用。但是，您确实设置了bottom值，因此请将其设置为动画：

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

FIDDLE

jQuery动画div无法正常工作

1 个答案: