I have a div in my view which first contains loading animation and then is changed with AJAX request result. It is described in details in this post.
Div’s width remains the same, while heights differs - contents are much higher (a long table) than loader animation, upon success and much shorter (one line error message) that animation, in case of error.
What is the best approach or quickest solution for introducing basic jQuery (not jQuery UI!) fold/unfold animation? So, in case of success, div would became larger with slow growing animation, and upon error it would get smaller, also with slow animation?
but have no idea, how to combine it with AJAX request and its results? I can’t toggle div holding result because I don’t want to show or hide it - it is visible all the time and I only want to change its height with animation.
But this first hides slowly (slideUp) contents still containing loader, then shows slowly (slideDown) contents already containing AJAX request results.
What I want to have is that upon AJAX response contents of div slides down toward required height (or up if this is one-line error message) and then loader is being replaced with AJAX response contents. But I have no idea how to achieve it? :\
Well… Then the solution would be to put AJAX result to some invisible, temporal div, slide down current one to the same width as that temporal one and then paste copy contents of temporal div to the right one.
Hm… this seems to be a really hard and most important - kind of unnecessary work. I think I’ll pass on this one, although effect could be interesting.
And here is an updated version with proper handling of both success and error results - if someone would find it useful: