最初の関数呼び出しの後にイメージ回転with jquery animateが機能しない

Question

関数呼び出しに問題があります。変換イメージ回転の私のステップが最初の関数呼び出し時に呼び出された後に動作していません。私のページが読み込まれます。この関数は、作成したグラフ上で値が変更されるたびに呼び出されます。画像をペイントするには、画面上部から落としたコインが2枚あり、コインの積み重ね前に2度回転します。このように動作する代わりに、コインは、関数が呼び出されるたびに画面の上からドロップ/アニメートするだけです。

私は（.stop使用して試した

<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(); 

}

）、.clearQueue（）、異なっtransformプロパティを削除/設定、およびstackoverflowの上の様々な方法を確認しました。何も動作していないように見えるので、私は目の別のセットが私の問題を見つけることを望んでいます。前もって感謝します！

Answer 1

は、これは少し遅れて、しかし、何をする必要があるに別の2つの回転を追加することであることができます各繰り返しのアニメーション。それはあなたの問題を解決し、あなたは何度も同じ機能を繰り返し呼び出すことができます。

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

ページの状態に関係なくコードを実行しているようです。

すると、この内側にコードを挿入してみてください。

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

詳細については以下を参照してください https://learn.jquery.com/using-jquery-core/document-ready/