Animer les données JSON avec jQuery/AJAX?

Question

J'essaye de construire une petite page qui montrera des données d'un objet de JSON et avoir ce fondu dedans, animez en place sur la page, et ensuite fondu dehors.

J'ai trouvé comment obtenir les données à afficher et à disparaître, mais je suis bloqué sur la partie animée. J'ai enfermé ce que j'ai jusqu'ici.

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

Où est ce que je manque le point? Je l'ai utilisé jQuery pour créer des pages de type AJAX avant, juste essayer de comprendre pourquoi je ne peux pas animer les données quand je l'afficher

Answer 1

Je pense que vous animez div avant votre réponse essayez ce code:

$(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

Cocher cette http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation1

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

Answer 3

Vous pouvez animer en utilisant le code foll -

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

Answer 4

Essayez ceci:

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