0

我正在尝试使用 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 没有经验。

4

3 回答 3

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();
});
于 2012-05-10T06:14:34.347 回答
2

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

我假设您loading在页面某处有一个加载图像 div，其 id 最初是隐藏的。然后你可以像这样使用上面的这两个函数显示加载图像

//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();
 });
于 2012-05-10T06:31:36.420 回答
0

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

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

函数fadeIn / fadeOut基本上是上述的简写，但我想你真的不想在这种情况下淡出。

于 2012-05-10T06:14:47.640 回答