CODEWITHSUNDEEP
javascriptjquery
ClaraFrazao
ClaraFrazao

Reputation: 95

Animate same element in different time with callback

I am having some issues for some time now. I´m trying to make this work but I tested one of the things didn't work or didn't work as aspected. In this case the callback doesn't work. I need to have three animations, one of them with a callback, with different times on the same element.

$('#hey').animate({
  'margin-left': '100px',
}, {queue: false, duration: 1000});

$('#hey').animate({
  'margin-top': '100px',
}, {queue: false, duration: 1500}, function() {
  alert('hey'); // <-- this doesn't work -->
});

$('#hey').animate({
  'height': '190px',
}, {queue: false, duration: 2000});
#hey {
  width: 50px;
  height: 50px;
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="hey"></div>

Upvotes: 1

Views: 33

Answers (1)

Tilak Madichetti
Tilak Madichetti

Reputation: 4346

Use the complete property

$('#hey').animate({
    'margin-top': '100px',
}, {
    queue: false,
    duration: 1500,
    complete: function () {
        // Callback here
        alert('hey'); // In your case...
    }
});

Please also note that SO is not an alternative to reading the documentation yourself

Upvotes: 2

Related Questions