HELP! I need a decent transition effect for a AJAX operation
I looked everywhere, tutorial and forums and books and such, but I can't find help for my case. Everyone explains fadeIn and fadeout effects but not in conjunction with ajax. I also tried ajaxStart and ajaxStop but couldn't get it to work.
So here's the deal: I call a js file from a php page. The javascript file does ajax things and changes the content of a div accordingly. The function works.
Problem is with this transition:
old content > loading message > new content
the fadeIn/fadeOut effects I implemented give horrible results!
That's where I need help!!
Here is the (simplified) content of the js file:
-
function something(variable, variable) {
jQuery(document).ready
(
function($){
$("div.mydiv").fadeOut('slow');
$("div.mydiv").html("loading message").fadeIn('slow', function () {
$.ajax({
type: "POST",
url: some variable,
data: some variable,
success: function(html){
$("div.mydiv").after(html).remove();
}
});
});
}
)
}
with this code, what you get is
old content (disappears abruptly)
loading message (fades in)
loading message (fades out)
loading message (fades in)
loading message (disappears abruptly)
new content (appears abruptly)
..which makes no sense!
What am I doing wrong?
Please help me, I am really stuck.
Thanks!