CODEWITHSUNDEEP
jqueryajaxjsonanimation
breadstickguy
breadstickguy

Reputation: 69

Animate JSON data with jQuery/AJAX?

I am trying to build a small page that will display data from a JSON object and have that fade in,animate into place on the page, and then fade out.

I've figured out how to get the data to show up and fade out, but I'm stuck on the animate part. I've enclosed what I have so far.

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

Where am I missing the point? I've used jQuery to build AJAX type pages before, just trying to figure out why I can't animate the data when I display it

Upvotes: 0

Views: 1722

Answers (4)

ebiv
ebiv

Reputation: 325

Try this:

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

Upvotes: 1

Manwal
Manwal

Reputation: 23816

I think you are animating div before your response try this 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

Upvotes: 0

Manvi
Manvi

Reputation: 775

You can animate using foll code - 

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

Upvotes: 0

rjdmello
rjdmello

Reputation: 863

check this http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation1

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

Upvotes: 1

Related Questions