jQuery FadeIn 元素一个接一个 ajax

Question

我有一个问题，根据我阅读的其他帖子，这应该不是问题。

我想要做的是通过 ajax 抓取内容，遍历内容并将其附加到 dom。添加元素后，将其淡入，然后重复。出现的问题是，所有元素似乎都是同时淡入的，而不是一个接一个。我尝试过多种不同的方法来解决这个问题。这是最接近我想要的，但是 fadeIn 并没有过渡，它只是出现。非常感谢任何帮助。

HTML

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

JS

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


        }
      });

我很难过，所以任何帮助都将不胜感激。我

Answer 1

利用 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

Answer 2

您应该在 UL 中添加所有 LI，并默认隐藏 LI，然后在完成后调用第一个 LI 的内部方法，使用 promise，例如：

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() 方法。

Answer 3

好吧，我终于明白了。这是最终代码：

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