如何在延迟后为top％制作动画？

Question

我有一个div在窗口中间有一个初始位置。延迟3秒后，我希望它滑到屏幕顶部。这是如何实现的？

这是我到目前为止（https://jsfiddle.net/5m363gt1/）：

HTML

<div id="red"></div>

CSS

#red{
width: 100px;
height: 100px;
position: absolute;
top: 50%;
background-color: red;
}

的jQuery

$("#red").delay(3000).animate({top:'0%'},1000);

Answer 1

您可以创建一个函数并使用jQuery中的setTimeout方法：

var onTop = function() {
    $("#red").animate({'top' : '0'});
};

    setTimeout(function(){
    onTop();
}, 3000);