Jquery AJAX效果

Question

我正在尝试用ajax加载页面，它的工作正常，没有问题，但我想添加fadeIn，fadeOut效果和加载器gif动画。

有谁能帮我做到这一点。我正在使用下面的代码。

$(document).ready(function(){
    // load index page when the page loads
    $("#main").load("content.php");

    $("#home").click(function(){
    // load home page on click
        $("#main").load("content.php");
    });
    $("#mediakit").click(function(){
    // load about page on click
        $("#main").load("mm-media-kit.php");
    });
});

我没有使用jquery的经验。

Answer 1

在这种情况下，您可以使用http://api.jquery.com/ajaxStart/和http://api.jquery.com/ajaxStop/来显示和隐藏正在加载的图像。像这样

我假设你的页面中有一个带有id loading的加载图像div，它最初是隐藏的。然后，您可以使用上面的这两个函数显示加载图像，如下所示

//show the loader at the start of ajax request
$("#loading").ajaxStart(function(){
   $(this).show();
 });
//hide the loader when ajax request Completes
$("#loading").ajaxComplete(function(){
   $(this).hide();
 });

Answer 2

尝试如下所示：

HTML：

<div id='main'></div>
<div id='mainloading'><img src='loading.gif'></div>

jQuery:

$("#main").fadeOut().load("content.php", function() {
    $(this).fadeIn();
    $('#mainloading').hide();
});

Answer 3

您可以根据需要在opacity 属性上使用动画CSS来淡入/淡出。(在加载之前将不透明度设置为零，然后在加载回调中将动画设置回1。)

$("#main").css('opacity', 0).load("mm-media-kit.php", function() {
    $("#main").animate({ opacity: 1}, 'slow');
});

fadeIn/ fadeOut的函数基本上是上述内容的简写，但我想您不会真的想在此场景中淡出。