jquery animieren mit Bild drehen funktioniert nicht nach dem ersten Funktionsaufruf

Question

Es gibt ein Problem mit einem Funktionsaufruf Ich habe, dass mein Schritt für die Transformation Bild drehen funktioniert nicht nach dem ersten Mal es bei einem ersten Funktionsaufruf wann aufgerufen wird Meine Seite lädt. Diese Funktion wird jedes Mal aufgerufen, wenn ein Wert in dem erstellten Diagramm geändert wird. Um ein Bild zu malen, gibt es zwei Münzen, die von der Oberseite des Bildschirms fallen und sich dann zweimal drehen, bevor sie auf einem Stapel Münzen landen. Wenn Sie so arbeiten, fallen die Münzen nur bei jedem Aufruf der Funktion vom oberen Bildschirmrand ab.

<div id="secondCoin"><img class="coin" src="./images/one_coin.png" alt="Second Coin Drops" /></div> 
<div id="firstCoin"><img class="coin" src="./images/one_coin.png" alt="First Coin Drops" /></div> 
<div id="showCoins"><img class="coin-stack" src="./images/fullstack_coins.png" alt="Stack of Coins" /></div> 

function coinStack(height){ 
var coinSound = document.getElementById('coin-sound'); 
var rotateDeg = 720; 
// prevents sound play on multiple clicks 
coinSound.pause(); 
coinSound.currentTime = 0; 
// causes coin stack to slide upward 
$("#showCoins").css("display", "inline-block"); 
$("#showCoins").css("top", height + "px"); 
screenWidth <= 400 ? $("#showCoins").stop().animate({top: '3'},1000) : $("#showCoins").stop().animate({top: '0'},1000); 
// first coin drops 
$("#firstCoin").css("display", "inline-block"); 
$("#firstCoin").css("top", "-324px"); 
$("#firstCoin").clearQueue().delay(1000).animate({top: '10', deg: rotateDeg},{ 
    duration: 350, 
    step: function(now){ 
     $("#firstCoin").css({ transform: "rotate(" + now + "deg)" }); 
    } 
}); 
// second coin drops 
$("#secondCoin").css("display", "inline-block"); 
$("#secondCoin").css("top", "-324px"); 
$("#secondCoin").clearQueue().delay(1400).animate({top: '0', deg: rotateDeg},{ 
    duration: 350, 
    step: function(now){ 
     $("#secondCoin").css({ transform: "rotate(" + now + "deg)" }); 
    } 
}); 
// coin sound effect 
coinSound.volume = 1.0; 
coinSound.play(); 

}

Ich habe versucht mit .stop(), .clearQueue(), Einstellung/Entfernen Eigentum verwandeln unterschiedlich, und überprüft verschiedene Methoden auf Stackoverflow. Nichts scheint zu funktionieren, also hoffe ich, dass andere Augen mein Problem erkennen werden. Danke im Voraus!

Answer 1

Dies kann ein bisschen spät, aber was Sie brauchen, ist zu tun, zwei weitere Drehungen hinzuzufügen Ihre Animation für jede Iteration. Das wird Ihr Problem lösen und Sie können die gleiche Funktion immer wieder aufrufen.

var rotateDeg = 720; //Declare this outside the function 
 

 
$('button').click(function() { 
 
    coinStack(400); 
 
}) 
 

 
function coinStack(height) { 
 

 
    $("#showCoins").css("display", "inline-block"); 
 
    $("#showCoins").css("top", height + "px"); 
 
    $("#firstCoin").css("display", "inline-block"); 
 
    $("#firstCoin").css("top", "-324px"); 
 
    
 
    $("#firstCoin").clearQueue().delay(1000).animate({ 
 
    top: '10', 
 
    deg: rotateDeg 
 
    }, { 
 
    duration: 3500, 
 
    step: function(now) { 
 
     $("div").css({ 
 
     transform: "rotate(" + now + "deg)" 
 
     }); 
 
    } 
 
    }); 
 
    
 
    rotateDeg += 720; //For every animation you add another 720 degrees 
 
}; 
 

 
$("#secondCoin").css("display", "inline-block"); 
 
$("#secondCoin").css("top", "-324px"); 
 
$("#secondCoin").clearQueue().delay(1400).animate({top: '0', deg: rotateDeg},{ 
 
    duration: 350, 
 
    step: function(now){ 
 
     $("#secondCoin").css({ transform: "rotate(" + now + "deg)" }); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="secondCoin"><img class="coin" src="#" alt="Second Coin Drops" /></div> 
 
<div id="firstCoin"><img class="coin" src="#" alt="First Coin Drops" /></div> 
 
<div id="showCoins"><img class="coin-stack" src="#" alt="Stack of Coins" /></div> 
 

 
<button>Push to rotate</button>

Answer 2

Offenbar führen Sie Ihren Code unabhängig vom Status Ihrer Seite aus.

Versuchen Sie Ihren Code innerhalb dieses Einfügen:

$(document).ready(function(){ 
//your code here 
}) 

Weitere Informationen finden Sie unter: https://learn.jquery.com/using-jquery-core/document-ready/