的jquery如何讓一個元素復出初始位置的動畫

後我使用jQuery做在我的網站一些動畫，但我只是複製的代碼的一些部分，我還沒有真正得到jQuery的任何技能。我的問題是，我有一個按鈕，讓我的動畫開始點擊動畫塊移動，但我想他回去在動畫到他最初的地方結束，使不可能通過點擊來獲取動畫塊至今按鈕上多次。我希望這是明確的，這裏是我的代碼：的jquery如何讓一個元素復出初始位置的動畫

HTML

<div id="button">Click here</div> 
<div id="square"></div>

CSS

#square { width:100px; height:100px; position:relative;}

的JavaScript

$("#button").click(function() { 
$("#square").animate({ 
left: "-=60px", 
}, 400); 
});

我怎樣才能獲得quare回來他最初的動畫之後的位置？

來源

2016-11-24 G. Ayub

你會使用一個完整的回調函數來重新調整元素的位置。請參閱：http://codepen.io/TheStonedTurtle/pen/gLRevN

http://api.jquery.com/animate/

$("#square").animate({ 
    left: "-60px", 
}, 400, function(){ 
    $("#square").css('left','0px'); 
});

來源

2016-11-24 23:53:06 Michael

謝謝！這很簡單，有用，真的幫助我！這正是我想要做的。 –

而是使用jQuery動畫的，你可以創建CSS動畫，並觸發動畫與添加class.By默認CSS動畫回到初始狀態，見例如here

來源

2016-11-24 23:51:07

謝謝你的回答，看起來非常有趣，但我發現的唯一方法只使用HTML觸發我的動畫/ CSS是有：活躍它是不是真的有用，因爲我想只有一個按鈕evenement創造了許多動畫和使用，這是限制我一個動畫只覈實。 –

對於平滑的動畫我會建議的JS和CSS的使用組合。

示例代碼段：

$("#button").click(function() { 
 
    $("#square").addClass("animate").delay(400).queue(function(next) { 
 
    $(this).removeClass("animate"); 
 
    next(); 
 
    }); 
 
});

#square { 
 
    width: 100px; 
 
    height: 100px; 
 
    position: relative; 
 
    background: red; 
 
    transform: translate3d(0, 0, 0); 
 
    transition: transform .4s linear; 
 
} 
 
#square.animate { 
 
    transform: translate3d(-60px, 0, 0); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="button">Click here</div> 
 
<div id="square"></div>http://stackoverflow.com/questions/40795871/jquery-how-to-make-an-element-comeback-to-initial-position-after-animation/40795957#

來源

2016-11-24 23:56:56

的jquery如何讓一個元素復出初始位置的動畫

回答

相關問題