Question

I move with jQuery an element to the left and I wanted to animate it fast back to the original position to start the animation from beginning.
My code looks like that:

---

#animation-element {
    position: relative;
}

---

$('#animation-element').animate({ left: '500px' }, 5000, 'linear', function() {
    // ???
});

It moves 500px to the right and at the end it should fast (2000ms) move back to 0px (left) and start the animation (500px to the right) again. It should be an infinitive animation.

Answer 1

Below jQuery extension method does what you need with a little configurability in addition.

$.fn.inout = function(w, d1, d2, ease) {
    var that = this;
    $(that).animate({left: w}, d1, ease, function() {
        $(that).animate({left: 0}, d2, ease, function() {
            $(that).inout(w, d1,d2, ease);
        });
    });
};

$('#animation-element').inout(500, 5000, 2000, 'linear');