向blockUI添加动画

Question

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

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

我想做的是动画在信息中的“点”。类似于：

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

任何关于我如何做到这一点的建议都将不胜感激。

Answer 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。