Damien Damien - 1 month ago 5
jQuery Question

Wait for the content to fadeIn a div with jquery ajax

I have a div, with a button.


  1. when I press the button I
    fadeOut()
    the div

  2. I load content from another page, with jQuery
    ajax()

  3. when the content is loaded, I want to put this content into the div

  4. only then,
    fadeIn()
    the div.



For now, I use this:

success: function (data) {
$('#inside-choice').html(data);
$('#inside-choice').fadeIn('slow');
},


But with this syntax, the fade in can start before that the content is totally loaded. How do I wait until the content is loaded before fading in the div?

Answer

use promise() :

success: function (data) {
     $('#inside-choice').html(data).promise().done(function(){
       $('#inside-choice').fadeIn('slow');
     });

},

https://api.jquery.com/promise/

Comments