Fade в загруженном AJAX содержимом?

Question

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), но это тоже не сработало.

Answer 1

Вам не нужно получать экземпляр 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); 

весело провести время