Javascript fadeTo Incrementally

Question

Я использую javascript ниже, чтобы рекурсивно перезагрузить целевой DIV, чей id="outPut", с результатами запроса данных, выполняемого при передаче аргументов getData.php. Проблема в том, что fadeTo приводит к исчезновению всех данных, возвращаемых при каждом итерационном вызове.

getData Форматирует каждую строку данных, возвращенную в своем собственном DIV, поэтому, если есть 10 записей, вызываемых на заданной итерации selectData, и новые записи не добавляются до следующей итерации selectData, тогда 10 возвращенных данных DIVs загружаются в DIV «outPut» не должен все исчезать и обратно, но оставаться заметно неизменным. Однако, если 11-я запись добавляется до следующего выбора selectData, то только DIV новой 11-й записи должен исчезать в видимость, присоединяясь к ранее существующим 10 DIV, все, что должно было оставаться постоянно видимым, поскольку они были там уже на предыдущем итерация.

Подведено, как можно fadeTo использовать для постепенного угасания до visibility только то, что нового со времени последнего вызова?

function selectData() 

{ 

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

    setTimeout(selectData, 2000); 

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

Answer 1

Если я вас правильно понял, ваша getData.php страница возвращает записи, которые были помещены в DIV элементы, которые (через .load()) затем стать детьми DIVs вашего основного контейнера DIV #outPut. И getData.php всегда возвращает все данные из записи 1 и далее. Таким образом, вы в конечном итоге с чем-то вроде:

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

Если предположить, что это так, то перед вызовом .load() вы можете проверить, сколько ребенок DIVs там в настоящее время, а затем .load(), затем увядают новые:

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); 
} 

Обратите внимание, что я переместил код затухания внутри полного обратного вызова метода .load().