使用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); 
});