javascript - javascript方法中的图像没有改变

Question

我正在尝试使用 jQuery 交换图像，但是当我运行页面时，似乎该chase()方法在动画仍在进行时完成了。这个想法是将图像替换为翻转版本，因此它们似乎来回追逐彼此。但是，图像始终面向左侧。该方法似乎一次完成，而不是显示每次迭代。

<audio controls autoplay="false" onplay="chase()">
  <source src="Links/sillyChase.mp3" type="audio/mpeg" />
</audio>
<div id="dexter">
    <img id="dex" src="Images/dexterRight.jpg" width="170" height="120"/>
</div>
<div id="deedee">
     <img id="dee" src="Images/deedeeRight.jpg" width="170" height="120"/>
</div>
</div>

<script>
function chase(){
    for(var k=0;k<10;k++){ 
        $("#dex").attr("src","Images/dexterRight.jpg"); 
        $("#dee").attr("src","Images/deedeeRight.jpg"); 

        //moves images right  
        $("#dexter").animate({"left": "+=500px"},"slow"); 
        $("#deedee").animate({"left": "+=500px"},"slow"); 

        $("#dex").attr("src","Images/dexterLeft.jpg");
        $("#dee").attr("src","Images/deedeeLeft.jpg");  

        //moves images left 
        $("#dexter").animate({"left": "-=500px"},"slow"); 
        $("#deedee").animate({"left": "-=500px"},"slow"); 
    }
}
</script>

Answer 1

应该管用：

function chase(){
        for(var k=0;k<10;k++){ 
             $("#dexter,#deedee").promise().done(function() {
                   $("#dex").attr("src","Images/dexterRight.jpg"); 
                   $("#dee").attr("src","Images/deedeeRight.jpg");  
              });

              //moves images right  
              $("#dexter,#deedee").animate({"left": "+=500px"},"slow", function(){
                  $("#dex").attr("src","Images/dexterLeft.jpg");
                  $("#dee").attr("src","Images/deedeeLeft.jpg");
                  $("#dexter,#deedee").animate({"left": "-=500px"},"slow");
              });
        }

    }