Question

我在菜单中有一堆Ajax链接，重新加载名为#ajaxupdatediv的div。我想在加载新内容时显示另一个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(); });
});

这将在加载时隐藏内容，在任何ajax事件开始时淡入#ajaxloadingdiv（如果多次一次发生则保留它）并在最后一个ajax请求完成时隐藏它，同时#ajaxupdatediv 1}}将淡入。使用此方法，您不需要为每个元素/调用执行任何操作，这些是全局处理程序，请参阅.ajaxStart()和.ajaxStop()以获取完整信息。

一个事件的多个JS效果

1 个答案: