javascript - jQuery 动画函数的链接无法正常工作

Question

我正在尝试链接一些基本的 jQuery 动画，但它们没有按预期工作。 只有 1 个 left、top 和 hide 动画正在工作。 我认为这与 CSS 的 position 属性有关，但我不确定。

代码如下:https://jsfiddle.net/utkarsh17ife/L8rbene6/2/

$('#move')
    .show(3000)
    .animate({left: "100px"}, 1000)
    .animate({top: "100px"}, 1000)
    .animate({bottom: "100px"}, 1000)
    .animate({right: "1000px"}, 1000)
    .hide(3000);

#move {
    position: relative;
    border: 1px solid black;
}
body {
    border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="move">element here</span>    

Answer 1

您必须将之前设置的属性设置为null，它似乎正在保存属性，因此如果没有它，您会遇到冲突:

$('#move')
    .show(3000)
    .animate({left: 100}, 1000)
    .animate({top: 100}, 1000)
    .animate({top:null, bottom: 100}, 1000)
    .animate({left:null, right: 1000}, 1000)
    .hide(3000);

https://jsfiddle.net/L8rbene6/3/