I'm trying to change the content of a Div using:
$('#content').click(function() { $('#content').fadeOut().load('about.php').fadeIn('normal'); }); But it always flashes and I don't know how to solve it, since I'm a little inexperienced in jQuery.
I looked at this same question in here and I've tried the chosen answers but to no avail.
You should use the callback functions of the .fadeOut() and .load() functions. At the moment you are fading-out, adding HTML, and then fading-in all at the same time.
Try:
//add event handler to click event for the #content element $('#content').click(function() { //cache this element var $this = $(this); //fadeOut the element $this.fadeOut(function () { //after fadeOut is done, change it's HTML $this.load('about.php', function () { //now fadeIn the new HTML, this is in the callback for the `.load()` //function because `.load()` is an asynchronous function $this.fadeIn(); }); }); });
The reason I nested all the callback functions is so that each process can complete before the next one is run. First the .fadeOut() is allowed to complete, then the .load() is allowed to grab the data and place it in the DOM, then we .fadeIn() the element with the new HTML.
You might do something like this:
$('#content').click(function(){ $('#content').fadeOut(function(){ $('#content').load('about.php').fadeIn('normal'); }); }); Using the load as a callback for the fadeOut.
