Zeliax Zeliax - 1 month ago 18
Javascript Question

jQuery slideDown on load

I am loading a a partialView using ASP.NET MVC in my jQuery code. The partialView contains some explanation about the item that is clicked in my click function, and I would like the explanation to slide down once the object is "loaded".

I have the following code:

$('.details').click(function(){
$('#details').load($(this).data('url'), { id: $(this).data('id')}).slideDown('slow');
//the slidedown part doesn't seem to work.
});


But the
.slideDown()
doesn't seem to work. How can I got about this? Should I use
.animate()
instead?

Thanks!

EDIT



I found some questions saying I might need to
.hide()
it first. This seems to work, however it seems the "element" is not completely loaded when it slides down as some of the text updates after finishing the
.load()
.

Is there some way to run the
.slideDown()
once the load finishes?

Answer

It's just because $().load() is not immediate. There is a third parameter that is a callback than runs when load is complete, so, you need to await to slide down (not tested, sorry).

Can you try this? $('#details').load($(this).data('url'), { id: $(this).data('id')}, function() { $(this).slideDown('slow'); });

and tell us if it works.

Comments