CODEWITHSUNDEEP
javascriptjqueryanimationhtmlposition
Tom B
Tom B

Reputation: 15

How do I make a div jump back to its original position after it animates?

I'm having trouble figuring out callbacks, or whatever this is. I'm using some jquery addon called easing and what is supposed to happen is you click a button, and a div flies in from the left, then when you click on the x on that div, it flies out the right. Problem is, when you click it again it flies in from the right and out the right. What I want to do is have the div appear back at its original position when the animation finishes playing.

<script>
$(document).ready(function() {
    $('#button').click(function(event) {
        $('#animdiv')
            .animate(
                { left: 170 }, {
                    duration: 'slow',
                    easing: 'easeOutBack'
                });
});
    $('#exit').click(function(event) {
        $('#animdiv')
            .animate(
                { left: 1200 }, {
                    duration: 'slow',
                    easing: 'easeOutBack'
                });
    });
});
// this is the function that takes it back to it's original place
function placeDiv(x_pos, y_pos) {
  var d = document.getElementById('animdiv');
  d.style.position = "absolute";
  d.style.left = -600;
  d.style.top = 32;
}

</script>

Upvotes: 1

Views: 822

Answers (2)

Blazemonger
Blazemonger

Reputation: 92893

.animate takes a callback function which will run only after the animation is complete:

$('#exit').click(function(event) {
    $('#animdiv')
        .animate(
            { left: 1200 }, {
                duration: 'slow',
                easing: 'easeOutBack',
                complete: placeDiv
            });
});

However, your placeDiv function won't work until you add px to your styles:

function placeDiv() {
  var d = document.getElementById('animdiv');
  d.style.position = "absolute";
  d.style.left = "-600px";
  d.style.top = "32px";
}

or else use jQuery (which will add the px for you):

function placeDiv() {
  $('#animdiv').css({
    position: "absolute",
    left: -600,
    top: 32
  });
}

http://jsfiddle.net/mblase75/M6xGC/

Or, if you want to pass the x and y values:

$('#exit').click(function (event) {
    var xpos = -600,
        ypos = 32;
    $('#animdiv')
        .animate({
        left: 1200
    }, {
        duration: 'slow',
        easing: 'easeOutBack',
        complete: function() { placeDiv(xpos,ypos); }
    });
});

and the callback:

function placeDiv(x,y) {
  $('#animdiv').css({
    position: "absolute",
    left: x,
    top: y
  });
}

http://jsfiddle.net/mblase75/M6xGC/4/

Upvotes: 4

Mukesh Soni
Mukesh Soni

Reputation: 6668

Haha, didn't know there was a callback for after animation complete. Use that. Forget my answer.

Couple of ways of doing this -

  1. The div flying out can happen from right to left. In that case all you need to do is change left value of exit click - 

    $('#exit').click(function(event) {
    $('#animdiv')
        .animate(
            { left: -600 }, {
                duration: 'slow',
                easing: 'easeOutBack'
            });
});

  2. Before you animate the entry, hide the div, reposition to -600px, change to display: block again and then animate - 

    $('#button').click(function(event) {
    $('#animdiv').hide().css('left', '-600px').show()
        .animate(
            { left: 170 }, {
                duration: 'slow',
                easing: 'easeOutBack'
            });

Upvotes: 0

Related Questions