Jquery - 是否可以为加载AJAX的内容添加动画

Question

我有一些内容，我使用AJAX加载到我的页面。当它加载时，它在屏幕上闪烁，看起来有点凌乱。反正有没有添加一些jquery动画呢???

$("#posts").load("posts.php", {from_user: fm}, function(){});

Answer 1

您可以改用$.ajax()。

$.ajax({
    url: 'posts.php',
    data: {from_user: fm},
    success: function( html ) {
        $(html).hide().appendTo('#posts').fadeIn();
    }
});

Answer 2

$.get("posts.php", {from_user: fm}, function(html){
   $(html).hide().appendTo('yourSelector').fadeIn();
});

或$.post或$.ajax ...只是不加载，因为您需要隐藏它然后将其设置为动画。

Answer 3

您可以使用包装器将内容加载到。假设您<div class="postWrap"></div>内有<div id="posts"></div>。

<强> CSS

.postWrap {display：none;不透明度：0}

<强> JS

$("#posts .postWrap").load(
  "posts.php",
  {from_user: fm},
  function() {
    $("#post .postWrap").fadeIn(); //for example, you could use any effect
  }
);