0

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>
4

1 に答える 1

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");
              });
        }

    }
于 2013-04-08T17:44:23.837 に答える