Исчезать в AJAX загруженный контент? - PullRequest
Новая
       19

Исчезать в AJAX загруженный контент?

1 голос
/ 30 сентября 2010 
 var request = new Request({
   method: 'get',
   url: 'onlinestatusoutput.html.php',
   onComplete:function(response)
   {
     $('ajax-content').get('tween', {property: 'opacity', duration: 'long'}).start(0).set('html', response).set('html', response).tween('height', [0, 650]);
   }
  }).send();

Перед тем, как загрузить желаемый контент в div, у меня есть текст с надписью «Загрузка контента ...».

То, что я хотел бы сделать, это затемнить текст с надписью «Загрузка содержимого ...», а затем добавить содержимое, загруженное из запроса AJAX.

Как именно я это сделаю?

Я пытался использовать методы fade ('in') и fade ('out'), но это не сработало. Я также попробовал еще один вызов метода get () и установил непрозрачность 1 с помощью start (1), но это тоже не сработало.

1 Ответ

5 голосов
/ 30 сентября 2010

вам не нужно получать экземпляр Fx.tween и применять start, используйте прототип элемента .fade, который делает это за вас.

единственное, что вам нужно сделать, это УСТАНОВИТЬ onComplete (так как это не может быть асинхронно), чтобы заменить контент, удалить oncomplete и затем вернуться обратно.

проверьте это jsfiddle для демонстрации: http://www.jsfiddle.net/dimitar/NF2jz/291/

new Request.HTML({
    url: '/echo/html/',
    data: {
        html: "loaded content is now in",
        delay: 3
    },
    method: 'post',
    onRequest: function() {
        document.id("target").set("html", "Loading content...");
    },
    onComplete: function() {
        var response = this.response.text;
        document.id("target").set("tween", {
            onComplete: function() {
                this.element.set("html", response);
                this.removeEvents("complete");
                this.element.fade(1);
            },
            duration: 1000
        }).fade(0);
    }
}).send();

это для целей тестирования на jsfiddle (вы отправляете данные вместе с запросом для имитации ответа и указываете количество секунд для задержки ответа от сервера)

еще один способ справиться с этим - цепочка на экземпляре fx: 

        onComplete: function() {
            this.element.set("html", response);
            this.removeEvents("complete");
        },
        link: "chain"
    }).fade(0).fade(1);

веселись

...