Question

可以做一个动画，从一开始就不会快速重启。召回时的终点？

例如：
我有一个动画，垂直移动div top:0px到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

防止css动画重启从极端开始＆amp;召回时的终点

1 个答案: