jqueryアニメーション後に元の位置に戻って要素を復帰させる方法

Question

私のウェブサイトでアニメーションを作成するためにjQueryを使用していますが、コードの一部をコピーするだけで、jQueryのスキルはありません。 私の問題は、私のアニメーションをクリックで開始させ、アニメーションブロックを動かすボタンがあるのですが、アニメーションの終わりに彼の最初の場所に戻って、これまでclickinGでアニメーションブロックを取得できないようにしたいボタンで何度も。私はquareが彼の初期に戻って取得できますか

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

HTML：私はそれがここ、明らかだ願ってい は私のコードですアニメーションの後の位置？

Answer 1

を参照してくださいあなたは、完全なを使用します要素の位置を再調整するコールバック関数。参照：http://codepen.io/TheStonedTurtle/pen/gLRevNスムーズなアニメーションのため

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

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

Answer 2

代わりにjqueryのアニメーションを使用しての、あなたはCSSでアニメーションを作成し、class.ByのデフォルトのCSSアニメーションを追加してそのアニメーションを引き起こす可能性が初期状態に戻り、一例にhere

Answer 3

私は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#