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

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

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

Answer 2

您可以使用foll代码制作动画 -

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

Answer 3

我认为在您的回复尝试此代码之前，您正在为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 4

试试这个：

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

使用jQuery / AJAX动画JSON数据？

4 个答案: