хороший эффект загрузки jquery - PullRequest
Новая
       26

хороший эффект загрузки jquery

0 голосов
/ 19 августа 2010

Я хотел бы загрузить страницу внутри 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));
            }); 
}

Ответы [ 2 ]

1 голос
/ 19 августа 2010

Вам нужно обернуть свой код для обратного вызова .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)
                  });
  }); 
}
0 голосов
/ 19 августа 2010

Я попробовал твой код, и он, кажется, работает так, как ты хотел. Мне пришлось увеличить время затухания с 300 до 2000 мс, чтобы лучше видеть затухание.

Единственная проблема, с которой вы столкнетесь, - это loading.gif, который не появляется. Это потому, что вы исчезли из этого элемента, поэтому вы ничего не увидите там:)

edit: вместо этого вы можете сделать что-то подобное. 

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 вокруг #showdata. 

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