How can you ensure that an element returns to its original position after being animated in jQuery?

Question

How can you ensure that an element returns to its original position after being animated in jQuery?

I want to add some animations to my website using jQuery, but I lack the skills to create them from scratch. I have managed to copy some code snippets, but I am facing an issue with one of my animations. When I click a button, the block animates, but I want it to return to its original position after the animation ends. This way, multiple clicks on the button won't take the block too far away. Here is the code I am using:

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

Is there a way to make the square return to its initial position after the animation is complete?

javascript jquery html css animation

Answer 1

Answer №1

One alternative to utilizing jquery animate is to develop a CSS animation and activate it by adding a class. CSS animations typically revert to their original state unless specified otherwise. For reference, please visit here.

Answer 2

One alternative to utilizing jquery animate is to develop a CSS animation and activate it by adding a class. CSS animations typically revert to their original state unless specified otherwise. For reference, please visit here.

Answer 3

Answer №2

If you need to adjust the position of an element, you can utilize a complete callback function. Take a look at the example here: http://codepen.io/TheCreativeCoder/pen/eKBBrP

For more information, refer to http://api.jquery.com/animate/

$( "#rectangle" ).animate({
  top: "20px",
}, 300, function(){
  $( "#rectangle" ).css('top','0px');
});

Answer 4

If you need to adjust the position of an element, you can utilize a complete callback function. Take a look at the example here: http://codepen.io/TheCreativeCoder/pen/eKBBrP

For more information, refer to http://api.jquery.com/animate/

$( "#rectangle" ).animate({
  top: "20px",
}, 300, function(){
  $( "#rectangle" ).css('top','0px');
});

Answer 5

Answer №3

To achieve smoother animation, I recommend utilizing a combination of JavaScript and CSS.

Here is an example snippet:

$("#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#

Answer 6

To achieve smoother animation, I recommend utilizing a combination of JavaScript and CSS.

Here is an example snippet:

$("#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#

How can you ensure that an element returns to its original position after being animated in jQuery?

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to verify reCAPTCHA v2 on an HTML website?

Is there a way to extract a single value from an array of data and convert it into a series of values separated by commas, all using JavaScript but without

Is it commonplace for redux to generate an abundance of storage?

Can you guide me on how to programmatically set an option in an Angular 5 Material Select dropdown (mat-select) using typescript code?

What is the best way to reassign key-value pairs in JSON mapping using JavaScript/TypeScript?

Utilizing JQuery for retrieving a filename

Updating a specific property for each object within an array of objects in MongoDB, and inserting the object if it does not already exist

Refresh the CSS without having to reload the entire page

PHP code fails to set a hidden element within a form array

Bootstrap 4 Row failing to fill entire div width

The state remains constant upon clicking

Arrangement of HTML divs and styling classes

"Utilizing lightbox JS to produce a centralized overlay across the entire webpage

The Vue template is not able to recognize the Pug language syntax within the .vue file

Is there a way to retrieve posts by year and month using nextjs and contentful?

What is the best way to split strings in an input field?

Challenges with the Express server console

Update email address depending on the option chosen from the dropdown menu

Experiencing problems with the Locale setting when utilizing the formatNumber function in Angular's core functionalities

Populating a select dropdown menu with options pulled from SQL table entries