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，然后使用promise，在第一次LI上调用内部方法，例如：

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

jQuery FadeIn元素一个接一个的ajax

3 个答案: