Question

我的代码：http://jsfiddle.net/abbeynormal/tugyj69h/

当我注释掉jquery的第5行时，第一个动画运行正常。当我重新添加第5行时，没有任何反应。

根据我在SO上看到的答案，这两个动画应该同时发生，有或没有“queue：false”参数。

有关为何会发生这种情况的任何想法？谢谢！

<!doctype HTML>
<head>
<meta charset="UTF-8">
<style>
#container
{
    height: 400px;
    width: 400px;
    border-style: dotted;
    left: auto;
    right: auto;
    position: relative;
    overflow: hidden;
}
#gameStage
{
    height: 400px;
    width: 400px;
    background-color: brown;
    display: inline-block;
    overflow: hidden;
    position: absolute;
}
#nextStage
{
    height: 400px;
    width: 400px;
    background-color: green;
    display: inline-block;
    position: absolute;
    left: 100%;
}
</style>
</head>
<body>
<div id="container">
    <div id="gameStage"></div>
    <div id="nextStage"></div>
</div>
<button id="animate">Animate</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">    </script>
<script>
$("#animate").click(move)
function move()
{
    $("#gameStage").animate({left:"-100%"}, {duration:2000, queue: false});
//  $("#nextStage").animate({left:"50%"}), {duration:2000, queue: false});
}
</script>
</body>

Answer 1

第二行有语法错误，请注意下面如何关闭它

$("#nextStage").animate({left:"50%"}), {duration:2000, queue: false});
//                                  ^ here, syntax error !

替换为

$("#nextStage").animate({left:"50%"}, {duration:2000, queue: false});

FIDDLE

无法在同一时间发生两个jquery动画

1 个答案: