jQuery, ersetzen und animieren img Element

Question

jQuery Neuling hier! Ich versuche, ein Bild durch ein anderes Bild zu ersetzen und gleichzeitig zu animieren. Hier ist mein Code:

HTML

<img id="salt" src="images/salt.png" alt="salt"/> 
<img id="pepper" src="images/pepper.jpg" alt="pepper"/> 

CSS

#salt { 
    position: absolute; 
    top: 300px; 
    left: 180px; 
    cursor: pointer; 
} 

#pepper { 
    position: absolute; 
    top: 300px; 
    left: 180px; 
    cursor: pointer; 
    display: none; 
} 

jQuery

$(document).ready(function(){ 
    $("#salt").click(function(){ 
    $("#salt").animate({left: '300px'}); 
    $('#pepper').show(); 
    $('#salt').replaceWith($('#pepper')); 

    }); 
}); 

Die Animation ist wor king in Ordnung, wenn 'replaceWith' inaktiv ist; Wenn ich versuche, das Bild zu ersetzen, verschwindet Salz einfach und Pfeffer erscheint an seiner ersten Position. Ich brauche eine der beiden (wirklich egal, welche) um die Bewegung auszuführen und dann Pfeffer zu zeigen, wo Salz normalerweise nach der Animation wäre. Vielen Dank im Voraus!!

Answer 1

Sie könnten eine Callback-Funktion für die Animation verwenden

$("#salt").animate({ 
    left: '300px' 
    }, 5000, function() { 
    $('#pepper').show(); 
    $('#salt').replaceWith($('#pepper')); 
    }); 

Wenn die Animation beendet ist, erhalten die Funktion