CODEWITHSUNDEEP
jqueryajaxdelayfadeinappendto
Bren1818
Bren1818

Reputation: 2752

jQuery FadeIn element one after another ajax

I have a problem, which according to other posts I read shouldn't be a problem.

What I am trying to do is grab content via ajax, iterate through the content and append it to the dom. Once the element is appended, fade it in, and then repeat. The problem which occurs, is all elements appear to fade in at once rather than one after another. I've tried tackling this a number of different ways. This is the closest to what I want however, the fadeIn , well doesn't transition, it just appears. Any help is greatly appreciated.

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

I've also tried

$.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'm stumped so any help would be greatly appreciated. I

Upvotes: 0

Views: 770

Answers (3)

Bren1818
Bren1818

Reputation: 2752

Ok I finally got it. Here's the final code:

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

It seemed I had to use fadeTo, and then the default CSS for the element should be:

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

Upvotes: 0

A. Wolff
A. Wolff

Reputation: 74420

You should add all LIs in UL and make LIs hidden by default, then call internal method on first LI once done, using promise, e.g:

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

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

See a simplified DEMO to give you the idea: http://jsfiddle.net/Z8v8E/1/

In your each loop, just set a string, append it to UL outside of each loop then call animateLI() method on first LI.

Upvotes: 0

Casey Dwayne
Casey Dwayne

Reputation: 2169

Make use of the callback feature in jQuery.

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

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

})

This is really "cheating" to me, but it does the job I suppose.

var items, speed;

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

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

})

Fiddle

Upvotes: 1

Related Questions