Несколько эффектов JS на одно событие

Question

У меня есть несколько ссылок Ajax в меню, которые перезагружают div с именем #ajaxupdatediv. Я хочу отобразить еще один div, пока он загружает новый контент, так как мне запустить оба эффекта?

<div id="#ajaxupdatediv">
    Content will go here
</div>
<div id="ajaxloadingdiv">
    ...Loading...
</div>

Вот немного PHP

array(
    'update' => '#ajaxupdatediv',
    'before' => $this->Js->get('#ajaxupdatediv')->effect('fadeOut'),
    'complete' => $this->Js->get('#ajaxupdatediv')->effect('fadeIn'),
)

Answer 1

Вы можете активировать его для всех подобных событий:

$(function() {
   //Show loading during ajax...
   $('#ajaxloadingdiv').ajaxStart(function() { $(this).fadeIn(); })
                       .ajaxStop(function() { $(this).hide(); });

   //Hide the content div
   $('#ajaxupdatediv').ajaxStart(function() { $(this).hide(); })
                       .ajaxStop(function() { $(this).fadeIn(); });
});

Это будет скрывать содержимое при загрузке, затемнять #ajaxloadingdiv, когда начинается любое событие ajax (оставить его, если происходит несколько событий одновременно), и скрывать его, когда последний запрос ajax завершается, в то же время, #ajaxupdatediv будет затем используйте этот подход, вам не нужно ничего делать для элемента / вызова, это глобальные обработчики, см. .ajaxStart() и .ajaxStop() для полной информации.