jQuery: Do a function only once in an Ajax load

You can bind the div to fadein on the first ajax request using .ajaxStop() if it is the first request, unbinding itself so it doesn't happen more than once, like this:

$("#myDiv").ajaxStop(function() { $(this).unbind("ajaxStop").fadeIn(); }); 

Otherwise, just bind this when actually calling the ajax loading the div so it executes when that comes back. Alternatively, in your success function, just show it only if it's current hidden using the :hidden selector, like this:

$.ajax({ //options.. success: function(data) { //stuff.. $("#myDiv:hidden").fadeIn(); } }); 

There's a "one()" method in jQuery, that is similar to "bind()" but removes the event after execution. I would suggest giving it a try.

http://api.jquery.com/one/#typedatafn

It depends a bit how your Ajax request chain looks like. But if you know it's always the first call, you can just add a class to the div. That is, class="fadeIn" and remove it once it's faded in.

$('.fadeIn').fadeIn(function () { $(this).removeClass('fadeIn') }; 

how about using the data store, simply set a value to true once its been shown and check before showing in future. something like...

if(!$('div#yourDiv').data('hasShow')){ $('div#yourDiv').data('hasShown', true).fadeIn(); } 

Edit-

From the code you have posted I have come up with the following;

$(document).ready(function(){ // Hide the chat line div on load. $('div#chatline').hide(); $("div#chatref").everyTime(3000,function(i){ $.ajax({url: "chatx.php", cache: false, success: function(updated){ $('div#chatref').html(updated); $('div#chatline').is(':hidden').fadeIn('slow'); }}); }); }); 

You need your PHP page to output a div as follows for the chat line.

<div id="chatline"></div> 

For the chatref

<div id="chatref"></div> 

Hope this helps.