jQuery animation complete reverse

Question

Je déplace avec jQuery un élément vers la gauche et je veux l'animer rapidement pour qu'il revienne à sa position d'origine afin de reprendre l'animation depuis le début. Mon code ressemble à cela :

---

#animation-element {
    position: relative;
}

---

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

Il se déplace de 500px vers la droite et à la fin il devrait rapidement (2000ms) revenir à 0px (gauche) et recommencer l'animation (500px vers la droite). Il doit s'agir d'une animation infinitive.

Answer 1

La méthode d'extension jQuery ci-dessous fait ce dont vous avez besoin avec un peu de configurabilité en plus.

$.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');