Can't use divs from success function in AJAX

Question

I don't know why this won't work for me.

  }).success(function(data){
    if(data.status == 'success'){
            // $("#useravatar").empty();

                for(i = 0;i < data.id.length; i++){
            $("#useravatar").prepend('<div id="av'+data.id[i]+'" class="avatar">'+data.avatar[i]+'</div>');
            var dropDiv = $('#av'+data.id[i]);  // Code from here dont work. No error. tried alert(data.id[i]); and is fine.

        dropDiv.css({
        left: 130,
        top: -190,
        opacity: 0,
        display: 'inline'
    }).animate({
        left: 5,
        top: 10,
        opacity: 1
    }, 7000, 'easeOutBounce');

            }

            }

});

If I use this code alone:

  var dropDiv = $('#useravatar');  

        dropDiv.css({
        left: 130,
        top: -190,
        opacity: 0,
        display: 'inline'
    }).animate({
        left: 5,
        top: 10,
        opacity: 1
    }, 7000, 'easeOutBounce');

will work with that div.

My question is why the first divs are not working? How can I make it to let a div drop down with animation?

EDIT:

I have tried all above code in same file like that: but it didn't work also (the second function is not called or is not doing anything).

 function getchatuser() {
    $.ajax({
       type: "POST",
       url: "../users/process.php",
       data: {getchatuser: "getchatuser"},
       cache: false,
       dataType: 'json',
       async: false
    }).success(function (dat) {
          if (dat.status == 'success') {
              //$("#useravatar").empty();
                 for (i = 0; i < dat.id.length; i++) {
                   $("#useravatar").prepend('<div id="av' + dat.id[i] + '" class="avatar">' + dat.avatar[i] + '</div>');


                dropdivs(dat.id[i]);

        }
    }

  });
  }

 function dropdivs(idDiv) {
       // alert(idDiv); ----------> just to try this and it works got 112
     dropDiv = $('#av' + idDiv);
     dropDiv.css({
                 left: 130,
                  top: -190,
              opacity: 0,
              display: 'inline'
         }).animate({
                 left: 5,
                  top: 10,
              opacity: 1
     }, 7000, 'easeOutBounce');
  }

Answer 1

• demo http://jsfiddle.net/5fKJf/4/
  • updated the code to show the bounce effect as suggested by bdrx
  • updated code to use object, + fancy avatar ;)

    var dat = {
        id: [1, 2, 3, 4],
        avatar: ['https://cdn2.iconfinder.com/data/icons/male-users-2/512/1-32.png',
            'https://cdn2.iconfinder.com/data/icons/male-users-2/512/14-32.png',
            'https://cdn2.iconfinder.com/data/icons/male-users-2/512/8-32.png',
            'https://cdn2.iconfinder.com/data/icons/male-users-2/512/2-32.png']
    };

    for (i = 0; i < dat.id.length; i++) {
        $("#useravatar").prepend($('<div id="av' + dat.id[i] + '" class="avatar"><img src="' + dat.avatar[i] + '" alt="" /></div>').css({
            left: 130,
            top: -190,
            opacity: 0
        }).delay(i * 50).animate({
            left: 5,
            top: 0,
            opacity: 1
        }, 1500, 'easeOutBounce', function () {

        }));
    }