Change content using AJAX with FadeIn FadeOut effect

Algirdas — Thu, 26 Feb 2009 16:34:38 +0000

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
Refresh
When you click it, the content in div element with an id “content” will be changed. getrandomcontent.php is used to get random content.

Check our demo.

If this post helped you to solve your problem, please donate me. Donation button can be found on the right side of the page.

Algirdas Varnagiris » fade

Change content using AJAX with FadeIn FadeOut effect