使用 ajax 动画加载数据

Question

我想对从另一个页面加载的数据进行动画处理。

我通过在网上找到的一个示例成功地做到了这一点。

我的问题是，我想让这个效果只有在我的 ajax 加载时才起作用。

所以我尝试将我的 ajax 代码放在 .when 中，并将股票代码效果放在 .done 中

但它并没有像这样工作。

我还能尝试什么？

$(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);
        });

外部数据

                        <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

我猜你需要把你的“动画”代码放在 ajax 的成功回调函数中。

success : function (data) { [animationcodehere] }