jquery 第一次函数调用后，图像旋转动画不起作用

Question

函数调用存在问题我的转换图像旋转步骤在我的页面加载时第一次调用初始函数调用后无法正常工作。每次在我构建的图表上更改任何值时都会调用此函数。要画一幅画，有两枚硬币从屏幕顶部掉落，然后在落在一堆硬币上之前旋转两次。相反，每次调用该函数时，硬币只会从屏幕顶部开始 drop/animate。

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

}

我试过使用 .stop()、.clearQueue()、setting/removing 变换属性不同的方法，并检查了 Whosebug 上的各种方法。似乎没有任何效果，所以我希望另一双眼睛能发现我的问题。提前致谢！

Answer 1

无论页面状态如何，您似乎都在执行代码。

尝试在其中插入您的代码：

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

有关详细信息，请参阅： https://learn.jquery.com/using-jquery-core/document-ready/

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

jquery 第一次函数调用后，图像旋转动画不起作用

jquery animate with image rotate doesn't work after first function call

javascript

jquery

css-transforms

jquery-animate