jquery - dynamic element height set by AJAX success

Question

I have a collapsed list. On Ajax success, list auto-expands.

I'm trying to get height of that expanded list ... and failing.

Ajax adds dynamically elements to list, so height changes.

Here is stripped code:

$('form').submit(function() {

   $.ajax({  
        type: "POST",  
        url: "ajax/ajax.php",  
        data: {data:JSON.stringify(data)},  
        dataType: "json",
        success: function(x) {  

            $('#slider' + x.id).children('ul,li').slideDown("slow");

            //this does not return expected height (outerHeight() also tried)
            var t = $('#slider_' + x.id).height();
         } 
    });  

    return false;
});

Answer 1

I'm assuming the slideDown animation takes it time and when you've tried to get the height it has already changed.

You could use a callback for your animation, and get the height after the animation is over:

$('#slider' + x.id).children('ul,li').slideDown("slow", function() 
  {
   //this executes AFTER the animation is complete.
    var t = $('#slider_' + x.id).height();
  }