jquery - 将动画添加到ajax

Question

您好我正在尝试添加动画，例如淡入/淡出或滑动到 .load 。我附上了基本结构的小提琴，但首先我的 ajax 调用在小提琴上不起作用（我尝试了完整的 url），但它们在测试站点上工作。

我尝试将 .fade() 添加到函数的末尾，但这似乎不起作用。

有没有人有任何想法？

            $(".vCard").click(function(){
                $("#mainContent").load("ajax/vCard.php").fade();
            });

http://jsfiddle.net/craigie2204/mhUx7/

Answer 1

您可以先做一件事.hide()，然后添加.fadeIn()：

改为：

 $("#mainContent").load("ajax/vCard.php").hide().fadeIn();

或者更好地隐藏它css并添加.fadeIn()：

CSS：

#mainContent{
   display:none;
}

jQuery：

 $("#mainContent").load("ajax/vCard.php").fadeIn();

但是你必须在.load()jquery方法的回调处理程序中做：

$("#mainContent").load("ajax/vCard.php", function(){
    $(this).fadeIn(); // this will be animated when load gets completed.
});

Answer 2

尝试.fadeIn(1500)

那应该工作

资源

我在哪里将 jQuery .fade() 函数放在 ajax 成功回调中？

http://api.jquery.com/fadeIn/

Answer 3

$(".vCard").click(function(){
    var _div = $("#mainContent");
    _div.load("ajax/vCard.php",function(){
        _div.fade();
    });
  });

块引用

Answer 4

你应该使用ajax函数，所以你可以使用不同的statut，比如：

$.ajax({
   type: "GET",
   url: url, //Set you url here
   data: getData,
   dataType: "html",
   success: function(data) {
      $(this).fadeIn(400); //When you loaded your ajax page, Fade In to show. If you want to parse what you get use '.html(data)'
   }
});