jQuery: Do a function only once in an Ajax load

I'm trying to do a simple .fadeIn() ONCE for the first div, but the problem is that this is an Ajax load inside a everyTime(xxx sec), so it does the same thing everytime it loads again.

How can I prevent the first div to .fadeIn() over and over again, but still do this function on the new div?

I am not very familiar with jQuery, so feed me with a spoon :)

Update:

I have been trying out all of your suggestions! I really appreciate your help, but I'm still stuck. I haven't got the .one to work. I tried $("#chatline:first").one(function(){ $(this).fadein()});, but I get a major failure from jQuery :p as I said. I'm pretty new to jQuery.

I also tried adding and removing classes, but cannot make jQuery remember that the class is removed, so it fades in and out, etc.

Here's the script, sligtly shorted.

...

j(document).ready(function(){

   //reloads every 3sec

j(".chatref").everyTime(3000,function(i){
j.ajax({url: "chatx.php",
cache: false,
success: function(html){
j(".chatref").html(html);

   // These for testing

if($('div#chatlin开发者_运维知识库e').hasClass('first')){
j("#chatline").fadeIn('slow');
}

snipped... End of jQuery

PHP (part of chatx.php):

div class='chatref' <- This one is only for jQuery's everytime function, e.g where to show the stuff. Don't know other ways to do this.

//First div I added classname first and hidden with PHP.

div class='chatline hidden first'

div class='chatline'

div class='chatline'
div class='chatline'

.... etc.

snipped... End PHP.

I hope I have explained it good enough! Thanx for the help guys!!

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.