[英]if the hide() jquery animate function set after animate(),it doesn't work?
[英]jquery animate with image rotate doesn't work after first function call
函數調用存在問題,我的頁面加載后在第一次調用初始函數調用后,變換圖像旋轉的步驟不起作用。 每當我在構建的圖形上更改任何值時,都會調用此函數。 要繪制圖片,有兩個硬幣從屏幕頂部掉落,然后旋轉兩次,然后降落到一堆硬幣上。 代幣那樣工作,每次調用該函數時,代幣僅從屏幕頂部掉落/動畫。
<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(),以不同方式設置/刪除transform屬性,並檢查了stackoverflow上的各種方法。 似乎沒有任何效果,所以我希望另一雙眼睛能夠發現我的問題。 提前致謝!
這可能會有點晚,但是您需要做的是為每次迭代在動畫中添加另外兩個旋轉。 這樣可以解決您的問題,您可以反復調用相同的函數。
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>
無論頁面的狀態如何,您似乎都在執行代碼。
嘗試在其中插入代碼:
$(document).ready(function(){
//your code here
})
有關更多信息,請參見: https : //learn.jquery.com/using-jquery-core/document-ready/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.