Change content using AJAX with FadeIn FadeOut effect
Here you will find how to do such a trick: when somebody clicks the button, the old content fades out and then the new fades in.
To do this I used jQuery witch is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.
The java script code is quite short and easy:
function refreshContent() {
$("#content").fadeOut("slow", function(){
$("#content").load("getrandomcontent.php",false, function() {
$("#content").fadeIn("slow");
});
})
return false;
}
Now you can use this function for a link
<a href="#" onclick="return refreshContent();">Refresh</a>
When you click it, the content in div element with an id “content” will be changed. getrandomcontent.php is used to get random content.
If this post helped you to solve your problem, please donate me. Donation button can be found on the right side of the page.
Hi Algirdas,
A quick message to ask if you would be interested doing a bit of freelance work. I need a javascript which is similar to yours, but with additional functionalities. I’ll give you more details if you are interested.
best regards,
Tim
What are your rates for freelance work?
I found this and thought it was useful. But what if you wanted to just load a text file?
I noticed if I replace the .php file for a .txt file, it seems to work in all browsers but it doens’t work in IE browsers at all.
I can’t seem to find anywhere on the web about jquery not being able to load txt files. IF you have any advice please let me know..
Sorry but I do not have any advices for you. You may ask for advice in http://forum.jquery.com/. If you find solution, please add comment here too :)
This is a great trick! I only wish it worked in Internet Explorer.
I’m sorry. I got it to work. Very, very nice. Thank you.
Actually it’s working…