There are a lot of very similar questions on here but I cannot find an exact answer to my question.

I am new to using the jQuery .animate() method and I want to know if there's a common or best method of reversing the animation?

Here is a fiddle for an example of what I've come up with: Fiddle

Essentially all it does is use an if statement to check one CSS property and then animate it to one state or back to the other state.

$(document).ready(function () {
    $("[name=toggle]").on("click", function () {
        if ($('.box').width() < 125) {
            $(".box").animate({
                opacity: .3,
                width: "125px",
                height: "125px"
            }, 250);
        } else {
            $(".box").animate({
                opacity: 1,
                width: "100px",
                height: "100px"
            }, 250)
        }
    });
});

.box {
    background-color: lightblue;
    box-shadow: 5px 5px 10px #000000;
    width: 100px;
    height: 100px;
    display: block;
    margin: 20px auto 0 auto;
    border-radius: 25px;
}
[name="toggle"] {
    display: block;
    margin: 0 auto;
    margin-top: 15px;
}

<script src=".1.0/jquery.min.js"></script>
<button name="toggle">Animate</button>
<div class="box"></div>

There are a lot of very similar questions on here but I cannot find an exact answer to my question.

I am new to using the jQuery .animate() method and I want to know if there's a common or best method of reversing the animation?

Here is a fiddle for an example of what I've come up with: Fiddle

Essentially all it does is use an if statement to check one CSS property and then animate it to one state or back to the other state.

$(document).ready(function () {
    $("[name=toggle]").on("click", function () {
        if ($('.box').width() < 125) {
            $(".box").animate({
                opacity: .3,
                width: "125px",
                height: "125px"
            }, 250);
        } else {
            $(".box").animate({
                opacity: 1,
                width: "100px",
                height: "100px"
            }, 250)
        }
    });
});

.box {
    background-color: lightblue;
    box-shadow: 5px 5px 10px #000000;
    width: 100px;
    height: 100px;
    display: block;
    margin: 20px auto 0 auto;
    border-radius: 25px;
}
[name="toggle"] {
    display: block;
    margin: 0 auto;
    margin-top: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button name="toggle">Animate</button>
<div class="box"></div>

This is what I was able to come up with with my first exposure to .animate(), but I think there may be a better way. Say you want to have an animation on hover, and reverse the animation when the mouse is moved off the element. Is there a way to easily reverse the jQuery animation easily? I am away I could use a :hover state with CSS, but this is a hypothetical question regarding jQuery .animate().

• javascript
• jquery
• html
• css
• animation

• 2 As far as I know there isn't a reverse function with animate(), I use VelocityJS a lot more though (it has reverse support), worth checking out – justinw Commented Nov 5, 2015 at 1:31
• 1 Looks very cool, I will start playing around with it – jmancherje Commented Nov 5, 2015 at 1:37
• 1 $(".yourelem").removeAttr("style"); – Ari Commented Nov 5, 2015 at 1:51
• 1 There probably isn't a better way. Plain .css() lets you pass an empty string ('') to delete the rule from the element (therefore reverting to the stylesheet), but that doesn't seem to work with .animate() – a sad dude Commented Nov 5, 2015 at 1:57

4 Answers 4

You can do that with plain CSS using transitions.

.animate-me {
    background-color:red;
    width:50px;
    height:50px;
    position:absolute;
    top:0;
    left:150px;
    transition:left 2s, background-color 2s;
  
}  
.animate-me:hover{
  left:0;
  background-color:blue;
}

<div class="animate-me"></div>

Usually css is simpler. However when browsers are old jquery might be your only way so I have included the JQuery way.

function animationForward(){
  $(".animate-me").animate(
  {
    opacity: 0.25,
    left: "100",
    height: "100"
  }, 5000, function() {
    animationBackward();
  }
)}
function animationBackward(){
  $(".animate-me").animate(
  {
    opacity: 1,
    left: "50",
    height: "50"
  }, 5000, function() {
    animationForward();
  }
)}
animationForward();

.animate-me {
  width:50px;
  height:50px;
  background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="animate-me"></div>

This is probably the shortest way I can think of :

$(function() {

var small = true;

$('[name=toggle]').click(function() {

  small = !small;

  if (small) var properties = {opacity: 1, width: 100, height: 100};
  else properties = {opacity: .3, width: 125, height: 125};

  $('.box').stop().animate(properties, 250);
});
});

.box {
  background-color: lightblue;
  box-shadow: 5px 5px 10px #000000;
  width: 100px;
  height: 100px;
  display: block;
  margin: 20px auto 0 auto;
  border-radius: 25px;
}

[name="toggle"] {
  display: block;
  margin: 0 auto;
  margin-top: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button name="toggle">Animate</button>
<div class="box"></div>

Note that it's a good idea to add a .stop() to the animation. It will not get interrupted otherwise but will start accumulating the clicks (animation queue buildup) instead. More noticeable with longer durations.

Here's one with hover action :

$(function() {

$('[name=toggle]').on('mouseenter mouseleave', function(e) {

  if (e.type == 'mouseenter') var properties = {opacity: .3, width: 125, height: 125};
  else properties = {opacity: 1, width: 100, height: 100};

  $('.box').stop().animate(properties, 250);
});
});

.box {
  background-color: lightblue;
  box-shadow: 5px 5px 10px #000000;
  width: 100px;
  height: 100px;
  display: block;
  margin: 20px auto 0 auto;
  border-radius: 25px;
}

[name="toggle"] {
  display: block;
  margin: 0 auto;
  margin-top: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button name="toggle">Animate</button>
<div class="box"></div>

You could go crazy and override the original jQuery.fn.animate to cache the values:

var $animate = $.fn.animate
$.fn.animate = function(prop, speed, easing, callback) {
  if (!this.data('etamina')) {
    this.data('etamina', this.css(Object.keys(prop)))
  }
  return $animate.call(this, prop, speed, easing, callback)
}

$.fn.etamina = function(speed, easing, callback) {
  var prop = this.data('etamina')
  if (prop == null) {
    return this
  }
  this.data('etamina', null)
  return $animate.call(this, prop, speed, easing, callback)
}

Animate as usual with $(selector).animate, revert with $(selector).etamina.

// Animate
$('.foo').animate({
  top: '50%',
  left: '50%',
  width: '4em',
  height: '4em',
  marginTop: '-2em',
  marginLeft: '-2em',
  borderRadius: '50%'
})

// Revert
$('.foo').etamina()

https://fiddle.jshell.net/mk5zc1oh/

Note, that jQuery.css doesn't return the actual element offset and size, just the computed styles.

I would combine CSS transitions and using jQuery to toggle classes, like this:

JSFiddle

$(document).ready(function () {
    $("[name=toggle]").on("click", function () {
        $(".box").toggleClass("differentSizeBox");
    });
});

CSS:

.box {
    background-color: lightblue;
    box-shadow: 5px 5px 10px #000000;
    width: 100px;
    height: 100px;
    display: block;
    margin: 20px auto 0 auto;
    border-radius: 25px;
    -webkit-transition: all 0.25s ease-in;
    -moz-transition: all 0.25s ease-in;
    -o-transition: all 0.25s ease-in;
    transition: all 0.25s ease-in;
}
.differentSizeBox {
    opacity: .3;
    width: 125px;
    height: 125px;
}
[name="toggle"] {
    display: block;
    margin: 0 auto;
    margin-top: 15px;
}

This way you can still control the change with a button click (or other JS events).

=====

EDIT: The only way I could think of to "reverse" with just JS changes would be to "remember" the CSS properties you are changing... and then revert back to that. This would be good in that if your original .box css changes, it would still work without changing the JS

JSFiddle

$(document).ready(function () {
    $boxes = $(".box");
    var boxCss = {
        opacity: $boxes.css("opacity"),
        width: $boxes.css("width"),
        height: $boxes.css("height")
    };
    $("[name=toggle]").on("click", function () {
        if ($boxes.hasClass("changed")) {
            $boxes.animate(boxCss, 250);
            $boxes.removeClass("changed");
        } else {
            $boxes.animate({
                opacity: .3,
                width: "125px",
                height: "125px"
            }, 250);
            $boxes.addClass("changed");
        }
    });
});

======

NOTE: jQueryUI has a toggleClass() that includes animations.