第一个函数调用后，带有图像旋转的jQuery动画不起作用

Question

There is an issue with a function call I have that my step for the transform image rotate isn't working after the first time it's called on an initial function call when my page loads. This function is called every time any value is changed on the graph I built. To paint a picture there are two coins that drop from the top of the screen and then rotate twice before they land on a stack of coins. Instead working like that, the coins only drop/animate from the top of the screen every time the function is called.

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

}

I've tried using .stop(), .clearQueue(), setting/removing the transform property differently, and checked various methods on stackoverflow. Nothing seems to be working so I'm hoping another set of eyes will spot my issue. Thanks in advance!

Answer 1

This can be a little bit late, but what you need to do is to add another two rotations to your animation for each iteration. That will solve your problem and you can call the same function over and over again.

 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

It looks like you're executing your code regardless the state of your page.

Try inserting your code inside this:

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

For more information see: https://learn.jquery.com/using-jquery-core/document-ready/