jQuery动画：解决固定div的动画问题

Question

http://jsfiddle.net/HLw9U/

加载文档时，页脚会滑到顶部。

我想要它，以便当您单击文档时，页脚向下滑动到底部。

但是，它只是停留在最顶层。

这里有什么诡计？

编辑：添加代码

function slide_footer_to_top(){
    $j(".footer").animate({
        opacity: 0,
        bottom: "20%",
    }, 200, function(){
        // finished
    }).animate({
        opacity: 1,
        top: "0%",
    }, 600, function(){
        // finished
    });
}

function slide_footer_to_bottom(){
    $j(".footer").animate({
        opacity: 0,
        top: "inherit",
        bottom: "100%",
    }, 300, function(){
        // finished
    }).animate({
        opacity: 1,
        top: "inherit",
        bottom: "0%",
    }, 500, function(){
        // finished
    });

Answer 1

您正在同时设置顶部和底部值 - 顶部值会覆盖任何底部值，并且div保持在顶部。尝试类似：

function slide_footer_to_bottom(){
    $j(".footer").animate({
        opacity: 0,
        top: "90%",
    }, 300, function(){
        // finished
    }).animate({
        opacity: 1,
        top: "90%",
    }, 500, function(){
        // finished
    });

或取消设置最高值：

$j(".footer").css('top', '');