Question

I want to animate data loaded from another page with a ticker effect.

I managed to do this with one example that I found online.

My issue here is, I want to make this effect work only when my ajax is loaded.

So I tried it by putting my ajax code inside .when and the ticker effect in .done

But it did not work like this.

What else can I try?

$(document).ready(function() { 
        $(function CheckinMap() {
            $.when($.ajax({
                type: "GET",
                url: "default.cs.asp?Process=ViewCheckins",
                success: function(data) {
                $(".newsfeed").append(data);
                },
                error: function(data) {
                $(".newsfeed").append(data);
                }
            })).done();
        });
}); 


        var delay = 2000; // you can change it
        var count = 5; // How much items to animate
        var showing = 3; //How much items to show at a time
        var i = 0;
            function move(i) {
                return function() {
                    $('#feed'+i).remove().css('display', 'none').prependTo('.newsfeed');
                    }
            }
            function shift() {
                var toShow = (i + showing) % count;
                $('#feed'+toShow).slideDown(1000, move(i));
                $('#feed'+i).slideUp(1000, move(i));
                i = (i + 1) % count;
                setTimeout('shift()', delay);
            }    
        $(document).ready(function() {
            setTimeout('shift()', delay);
        });

external data

                        <div class="metadata" id="feed0">
                            <div class="userinfo">
                                <span><strong>&nbsp;</strong> @ Amphi I @ NY</span>
                                <span></span>
                                <span>-5276 seconds ago</span>
                            </div>
                            <div class="commonfriends">                               
                            </div>                                
                            <div class="tools">                               
                            </div>  
                        </div>

                        <div class="metadata" id="feed1">
                            <div class="userinfo">
                                <span><strong>&nbsp;</strong> @ Flaming Buddha House</span>
                                <span></span>
                                <span>18 hours ago</span>
                            </div>
                            <div class="commonfriends">                               
                            </div>                                
                            <div class="tools">                               
                            </div>  
                        </div>

                        <div class="metadata" id="feed2">
                            <div class="userinfo">
                                <span><strong>&nbsp;</strong> @ Bar @ NY</span>
                                <span></span>
                                <span>19 hours ago</span>
                            </div>
                            <div class="commonfriends">                               
                            </div>                                
                            <div class="tools">                               
                            </div>  
                        </div>

                        <div class="metadata" id="feed3">
                            <div class="userinfo">
                                <span><strong>&nbsp;</strong> @ Gym @ NY</span>
                                <span></span>
                                <span>8 hours ago</span>
                            </div>
                            <div class="commonfriends">                               
                            </div>                                
                            <div class="tools">                               
                            </div>  
                        </div>

                        <div class="metadata" id="feed4">
                            <div class="userinfo">
                                <span><strong>&nbsp;</strong> @ Bar @ NY</span>
                                <span></span>
                                <span>yesterday</span>
                            </div>
                            <div class="commonfriends">                               
                            </div>                                
                            <div class="tools">                               
                            </div>  
                        </div>

                        <div class="metadata" id="feed5">
                            <div class="userinfo">
                                <span><strong>&nbsp;</strong> @ NY</span>
                                <span></span>
                                <span>yesterday</span>
                            </div>
                            <div class="commonfriends">                               
                            </div>                                
                            <div class="tools">                               
                            </div>  
                        </div>

Answer 1

I guess you need to put your “animation” code inside the success callback function of ajax.

success : function (data) { [animationcodehere] }