This is how my HTML looks:
<ul id="list">
<li><a href="#one">One</a></li>
<li><a href="#two">Two</a></li>
<li><a href="#three">Three</a></li>
<ul>
And this is my jQuery:
$("#list li").fadeOut(600, function(){
$.ajax({
type: "POST",
url: "includes/functions/ajax.php",
data: { id: id },
dataType: "json",
})
.done(function(data){
otherFunction(data);
});
});
So, I'm trying to hide the list elements and after that run the ajax request. But the problem is that for some reason the ajax request is executing three times. If I remove the fade function the request executes properly (only once), so probably is running as many times as items are on my list, which I find strange. Is that possible? Can you help me to figure out a solution? I really need that ajax request to execute only when the fadeOut function has finished.
I hope I made myself clear and I apologize if I messed up with my english.
Thank you!
The standard animation complete callback is called for each element in the collection.
If you use .promise() you can queue a callback that will wait until all animations have completed on the given collection:
$('#myList li').fadeOut('slow', function() {
console.log('per element');
}).promise().done(function() {
console.log('all elements');
});