使用jQuery/AJAX动画JSON数据？

Question

我正在尝试构建一个小页面，它将显示来自JSON对象的数据，并将其淡入，在页面上放置到位，然后淡出。

我已经想出了如何让数据显示和淡出，但我卡在动画部分。我已经附上了迄今为止我所拥有的。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> 
    <script> 
    $(document).ready(function(){ 
     $("div").ready(function(){ 
      $.getJSON("url",function(result){ 
       $.each(result, function(i, field){ 
       $("div").append(field + " "); 
       }); 
     }); 
     }); 
    }); 

    $(document).ready(function() { 
     $("div").hide().fadeIn(3000).fadeOut(3000); 
    }); 
    </script> 

我错在哪里？我用jQuery的前构建AJAX类型的网页，只是想弄清楚为什么我不能动画的数据时，我显示它

Answer 1

我认为你是动画DIV之前，你的反应试试这个代码：

$(document).ready(function(){ 
     $("div").hide().fadeIn(3000).fadeOut(3000);//hiding 
     $("div").ready(function(){ 
      $.getJSON("url",function(result){ 
       $.each(result, function(i, field){ 
       $("div").append(field + " "); 
       }); 
       $("div").hide().fadeIn(3000);//animating 
     }); 
     }); 
    }); 

DEMO

Answer 2

检查这个http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation1

$("div").animate({left:'250px'}); 

Answer 3

您可以使用动画代码FOLL -

$(document).ready(function() { 
    $("div").hide().fadeIn(3000).animate({left:'250px'}).fadeOut(3000); 
}); 

Answer 4

试试这个：

$.getJSON("url").done(function(data){ 
    $.each(data, function(i, field){ $("div").append(field + " "); }); 
    $("div").hide().fadeIn(3000); 
});