jquery как вернуть элемент в исходное положение после анимации

Question

Я использую jQuery, чтобы сделать некоторые анимации на своем веб-сайте, но я просто копирую некоторые части кода, и у меня не было никаких навыков в jQuery. Моя проблема заключается в том, что у меня есть кнопка, которая заставляет мою анимацию начинать нажимать, а анимированный блок перемещается, но я хочу, чтобы он вернулся в конце анимации в свое первоначальное место, чтобы сделать невозможным получение анимированного блока до сих пор нажатием кнопки clickinG много раз на кнопке. Я надеюсь, что это понятно, вот мой код:

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 возвращаться к его первоначальное положение после анимации?

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#