JQuery slideDown() after Ajax not working

[robs99]

Hey,

im trying to load new content through ajax in a div and instead of showing all the new content at once i want the div to slowly slide down and reveal the new content. For some reason its not working, the new content gets loaded and its shown at once. Here is a demo:

http://gator1016.hostgator.com/~youtubed/test/

And here is the JS code:

function loadnew() {
$('#divcontent').html('<img src="ajaxbar.gif">');
$.ajax({
    url: 'ajaxcontent.php',
    success: function(data){
        $('#divcontent').html(data);
        $('#divcontent').slideDown('slow');
        }
    });
}

 

Any ideas?

Thanks in advance

[Adam]

Strangely it works if the div is set to display:none. What you could do as a bit of a work around is wrap the response data in a hidden div and apply the .slideDown() to that?

[AtlasC1]

Yeah, the container of the data in jQuery has to be set to display:none; if you want it to start out in a manner that isn't visible, then have it slide down.

 

-jm

[robs99]

hello,

thanks for the replies. the thing is i dont want to hide the div before it loads, i just want it to scroll to the "new" height of the loaded content. i know it works if i scroll it up, load the content and then scroll it down. but i want to find a way to do this without having to hide or scroll the div up.

its hard to explain what im trying to achieve, i hope you understand what i mean

thanks in advance

[Adam]

I posted a solution above; I've tested it with your code and it works.