漂亮的 jquery 加载效果答案

【问题标题】：nice jquery load effect漂亮的 jquery 加载效果
【发布时间】：2010-08-19 15:20:13
【问题描述】：

我想在一个 div 中加载一个带有 fadeTo 效果的页面。我为此创建了这个函数

function show(div) {
$("#showdata").fadeTo(300,0.0,function() {
                $("#showdata")
                .html('<img src="images/loading.gif" />')
                .load('includes/show/'+div+'.inc.php')
                .fadeTo(300,1.0);;
            }); 
}

从当前内容淡化到图像是可以的，但是之后，新的内容突然弹出。

我也试过了，但结果一样：

function show(div) {
$("#showdata").fadeTo(300,0.0,function() {
                $("#showdata")
                .html('<img src="images/loading.gif" />')
                .load('includes/show/'+div+'.inc.php',$("#showdata").fadeTo(300,1.0));
            }); 
}

【问题讨论】：

标签： javascript jquery jquery-chaining

【解决方案1】：

您需要将 .load() 回调的代码包装为匿名函数，如下所示：

function show(div) {
  $("#showdata").fadeTo(300,0.0,function() {
    $("#showdata").html('<img src="images/loading.gif" />')
                  .load('includes/show/'+div+'.inc.php', function() {
                     $(this).fadeTo(300,1.0)
                  });
  }); 
}

【讨论】：

【解决方案2】：

我尝试了您的代码，它似乎可以按您的预期工作。我必须将淡入淡出时间从 300 毫秒增加到 2000 毫秒才能更好地看到淡入淡出。

您将遇到的一个问题是 loading.gif 没有显示出来。那是因为你淡出那个元素，所以你不会在那里看到任何东西:)

编辑：您可以改为这样做。

function show(div){
    $("#showdata").fadeTo(2000,0.0,function() {
        $("#showdata")
        .parent().append('<img src="loading.gif" />') //add the image to the container, so you can see it still
        .end().load('includes/show/'+div+'.inc.php', function(){
            $("#showdata")
            .parent().find('img').remove() //remove the image once the page is loaded. 
            .end().end().fadeTo(2000,1.0);
        });
    }); 
}

您必须在#showdata 周围添加一个容器 div。

<div>
   <div id="#showdata">TEST</div>
</div>

【讨论】：