代码之家 › 专栏 › 技术社区 › NVG

很好的jquery加载效果

jquery-chaining jquery javascript

0

NVG · 技术社区 · 14 年前

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));
            }); 
}

2 回复 | 直到 14 年前

1

Nick Craver 14 年前

您需要为 .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

0

user379221 14 年前

我试过你的代码,它看起来像你想要的那样工作。我不得不将衰减时间从300ms增加到2000ms,以便更好地看到衰减。

你会遇到的一个问题是加载.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);
        });
    }); 
}

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