将动画添加到 blockUI答案

【问题标题】：Adding animation to blockUI将动画添加到 blockUI
【发布时间】：2014-03-15 21:02:31
【问题描述】：

我在使用AJAX加载页面时使用blockUI，如下图：

function blockPage() {
    $.blockUI({ 
        message: 'Loading ...',
    }); 
}

我想做的是为消息中的“点”设置动画。比如：

var intVar = setInterval(function() {
    i = ++i % 5;
    $("#message").html("Loading "+Array(i+1).join("."));
}, 300);

任何关于我如何做到这一点的指针将不胜感激。

【问题讨论】：

标签： javascript jquery blockui jquery-blockui

【解决方案1】：

根据BlockUI 文档，您可以设置要显示的特定DOM 元素。

例如，我创建了一个JSBin。

您所做的就是将消息放入您将显示的文档中，以便您以后参考。

<div id="message" style="display:none;"> 
    <h1>Loading</h1> 
</div>

然后调用它：

$(document).ready(function() { 
    $('#pageDemo4').click(function() { 
        $.blockUI({ message: $('#message') });
        startAnimation();                
    }); 
});

您还需要定义开始动画和停止动画功能。

var intervalId;
function startAnimation() {
   var i = 0;
   intervalId = setInterval(function() {
      i = ++i % 5;
      $("#message").html("Loading "+Array(i+1).join("."));
   }, 300);
}

function stopAnimation() {
  $.unblockUI();
  clearInterval(intervalId);
}

当您的 AJAX 请求完成时，调用 stopAnimation。

【讨论】：

好东西。非常感谢:)