召回时防止css动画从极端的起点和终点重新启动答案

【问题标题】：prevent css animation restart from extreme start & end points when recalled召回时防止css动画从极端的起点和终点重新启动
【发布时间】：2014-04-05 01:39:44
【问题描述】：

是否可以制作一个在召回时不会从起点和终点快速重新启动的动画？

例如：
我有一个动画可以垂直移动一个 div 从top:0px 到top:100px（向下），
另一个动画将这个 div 从top:100px 垂直移动到top:0px（向上），
每个动画都由不同的按钮 A 和 B 控制。

如果我反复按下这些按钮，而 div 实际上是在中途
它不会从这个实际的中点重新开始，
但会很快返回到极端的起点或终点！

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

当我想起另一个动画时，有没有办法让 div 从它到达的实际点重新开始？

【问题讨论】：

@bjb568 你能举个小例子吗？
本教程可以帮助你了解你想要什么Controlling css animation。

标签： css animation

【解决方案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

【讨论】：