css - 防止 css 动画在召回时从极端起点和终点重新启动

Question

是否可以制作一个在调用时不会从起点和终点快速重新开始的动画？

例如:
我有一个动画，它从 top:0px 垂直移动一个 div 到 top:100px (向下)，
另一个动画将此 div 从 top:100px 垂直移动到 top:0px(向上)，
每个动画由不同的按钮 A 和 B 控制。

如果我重复按这些按钮，div 实际上在中间路线
它不会从这个实际的中点重新开始，
但会快速返回到极限起点或终点!

参见:http://jsfiddle.net/4FB6k/

有没有办法让 div 从它到达的实际位置重新开始，当我想起其他动画时？

Answer 1

正如 bjb568 评论的那样，答案是使用过渡而不是动画

CSS

#a {
    width: 100px;
    height: 100px;
    position: absolute;
    background-color: green;
    transition: top 2s linear;
    top: 0px;
}

jQuery

$(document).ready(function(){
    $("#b").mousedown(function(){
        $("#a").css({"top":"200px"});
     });
    $("#b").mouseup(function(){
        $("#a").css({"top":"0px"});
     });
});

demo