Javascript fadeTo Incrementally

I use the javascript below to recursively reload a target DIV, whose id="outPut", with the results of a data query performed when passing arguments to getData.php. The problem is that the fadeTo fades all the data returned with each iterative call.

getData formats each row of data returned in its own DIV, so if there are 10 records called on a given iteration of selectData, and no new records are added before the next iteration of selectData, then 10 returned data DIVs loaded into DIV "outPut" should not all fade away and back, but remain visibly unaltered. However, if an 11th record is added before the next itreation of selectData, then just the new 11th record's DIV should fade into visibility, joining the previously existing 10 DIVs, all which should have remain permanently visible, since they were there already at the previous iteration.

Summarized, how can fadeTo be used to incrementally fade to visibility only what is new since the last call?

function selectData()

{

    $("#outPut").load("getData.php?userid=" + userId + "&flow=" + flow + "&order=" + order).fadeTo(0,0).fadeTo(500,1);

    setTimeout(selectData, 2000);

    $.ajaxSetup
    (
        {
            cache:false
        }
    );
}

Solution

If I understand you correctly, your getData.php page returns records that have been placed into DIV elements that (via .load()) then become child DIVs of your main container div #outPut. And getData.php always returns all of the data from record 1 onwards. So you end up with something like:

<div id="outPut">
  <div>Record 1</div>
  <div>Record 2</div>
</div>

Assuming that is the case, then before calling .load() you could check how many child DIVs there currently are, then .load(), then fade the new ones:

var $outPut = $("#outPut");
function selectData() {
  var count = $outPut.children("div").length;
  $outPut.load("getData.php?userid=" + userId + "&flow=" + flow + "&order=" + order,
    function() {
     $outPut.children("div").slice(count).fadeTo(0,0).fadeTo(500,1);
    }
  );

  setTimeout(selectData, 2000);
}

Note that I've moved the fading code to inside the complete callback of the .load() method.