jquery - 为ajax添加动画

Question

您好，我正在尝试添加动画，例如淡入/淡出或滑动到 .load 。我附上了基本结构的 fiddle ，但首先我的 ajax 调用在 fiddle 上不起作用(我尝试了完整的 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();

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

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