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] }

使用ajax为加载的数据设置动画

1 个答案: