current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top
up vote 1 down vote favorite

I have created an app in codeigniter that fetches some json data via ajax and displays it on the page.

What i am trying to achieve is to load in a div per fan that is essentially just a box containing their details.

I have this working fine with the code below but would love to add animation to it so the boxes kind of slide in with a small interval between each one. So far ive had no luck adding animation.

Could anyone please advise on how best to go about it? I'm not even sure the append method is the best way as I will essentially be using a templated div t 

function get_fans(){
     $.ajax('http://localhost/facebook_app/selectFans/', {
    type : 'get',
    dataType: 'json',
    success : function (data) {
        $.each(data, function(index) {
            $('section#fans').append('<div class="fan">' + data[index].first_name + ', ' + data[index].location +'</div>');
        }); 
    },
    error: function () {
        $('section#fans').text('Could not load fans.');
    }
});
}
share|improve this question
up vote 1 down vote accepted

One possible solution could be setting #fans with overflow hidden, and .fan with position relative and left as the width of #fans

For example:

#fans {
  overflow: hidden;
  width: 100px;
}

.fan {
  left: 100px;
}

And then animate them in jQuery like below:

$('.slide').each(function(i) {
  $(this).delay( i * 200 ).animate({left: 0});
});
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.