jQuery FadeIn元素一個接一個ajax

我有一個問題，根據其他帖子，我讀了不應該是一個問題。jQuery FadeIn元素一個接一個ajax

我想要做的是通過ajax抓取內容，遍歷內容並將其附加到dom。一旦元素被追加，淡入，然後重複。發生的問題是，所有元素似乎都會一下子淡出，而不是一個接一個地淡出。我嘗試過多種不同的方法。這是最接近我想要的，但淡入淡出，很好不轉換，它只是出現。任何幫助是極大的讚賞。

HTML

<ul id="search_results"></ul>

function doSearch(jsonPath){ 
$(function() { 

    $.ajax({ url: jsonPath , dataType: 'json', 
     async: false, 

     success: function(data) { 


      $.each(data, function(key, val) { 
      if(data[key].name != "NA"){ 
       setTimeout(function(){ 
       var html = ('<li class="searchResult" id="pic_' + key +'"><div class="searchProfileResult">' + 
        '<div class="userimage"><img title= "' + data[key].title+'"src="' + data[key].picture +'" /></div></div></li>'); 
        $(html).appendTo($('#search_results')).hide().fadeIn(2000); 
        }, (key*500)); 

      } 
      }); 
    } 

    }); 
}); 
} 
doSearch(jsonPath);

我也試過

$.each(data, function(key, val) { 
     if(data[key].name != "NA"){ 

      $('<li class="searchResult" id="pic_' + key +'"><div class="searchProfileResult">' + 
       '<div class="userimage"><img title= "' + data[key].title+'"src="' + data[key].picture +'" /></div></div></li>').appendTo($('#search_results')).hide().delay(key*500).fadeIn(2000); 


     } 
     });

我難倒所以任何幫助將不勝感激。 I

來源

2014-02-12 Bren1818

利用jQuery中的callback功能。

$('item').fadeIn(300,function(){ 

    //this is how you "chain" reactions 
    $('item2').fadeIn(300); 

})

這對我來說真的是「作弊」，但它確實是我想的工作。

var items, speed; 

items = $('ul li') 
speed = 300; 
$(document).ready(function(e) { 

    items.each(function(i, element) { 
    $(element).delay(speed*i).fadeIn(speed); 
    }) 

})

Fiddle

來源

2014-02-12 15:08:04

你將如何設置它的每個循環中？ –

我想你應該知道怎麼做:)如何設置一個遞歸動畫函數，並使用'each'構建'index，element'參數，但這是很多代碼。現在不能讓它變得太簡單了嗎？ –

我更願意使用承諾會是一種更好的方式，但我需要更多地考慮如何實現它關於OP的代碼 –

您應該添加所有LIS在UL，使LIS默認爲隱藏，然後調用內部方法上第一李完成一次，使用的承諾，例如：

animateLI($('ul li:first')); 

function animateLI($li) { 
    $li.fadeIn(2000).promise().done(function() { 
     if(!$(this).next().length) return; 
     animateLI($(this).next()); 
    }); 
}

看到一個簡化的DEMO給你的想法：http://jsfiddle.net/Z8v8E/1/

在你的每個循環中，只需設置一個字符串，將它附加到每個循環外部的UL，然後在第一個LI上調用animateLI（）方法。

來源

2014-02-12 15:20:37

我在另一個堆棧溢出發佈中看到了這個響應。這個答案的問題是元素只是「出現」，他們不會像他們應該淡化一樣。我完全被難倒爲什麼他們不是。 – Bren1818

@ Bren1818一個元素fadeIn（）需要隱藏，我想你知道它但誰知道。你應該提供一個相關的jsFiddle來複制你的問題，因爲你做錯了什麼事我不知道 –

@ A.Wolff你崩潰了我的瀏覽器:(這使得JS在一次循環中變得很瘋狂，並且有太多事情要做。 –

好吧，我終於明白了。下面是最終代碼：

function doSearch(jsonPath){ 
$(function() { 

    $.ajax({ url: jsonPath , dataType: 'json', 
     async: false, 
     //data: myData, 
     success: function(data) { 
      $.each(data, function(key, val) { 
      if(data[key].name != "NA"){ 

       $('#search_results').append('<li class="searchResult" id="pic_' + key +'"><div class="searchProfileResult">' + 
      '<div class="userimage"><img title= "' + data[key].title+'"src="' + data[key].picture +'" /></div></div></li>'); 

      } 
      }); 

    }}).done(function(){ 

     var items = $('#search_results li'); 
     var speed = 2300; 
     $(document).ready(function(e) { 

      items.each(function(i, element) { 
      $(element).delay(100*i).fadeTo("slow" , 1, function() { 

      }); 
      }) 

     }) 


    }); 
});

} doSearch（jsonPath）;

看來我不得不使用fadeTo，然後爲元素的默認CSS應該是：

<style> 
#search_results li.searchResult{ 
    opacity: 0; 
}

來源

2014-02-12 16:04:28 Bren1818

jQuery FadeIn元素一個接一個ajax

回答

相關問題