Question

我想添加一个对象的flash动画，因此它会闪烁＆＃34;当事情发生时。我怎么能用Javascript做到这一点？

我想要＆＃34;阻止＆＃34;对象眨眼。

    function createBlocks(source) {
    $.ajax({
        url : "blockList",
        type : "GET",
        dataType : "json",
        data : {
            source : source
        },
        success : function(response) {              
            var arrayBlock = [];
            var source1 = parseInt(response[0].source);
            var container = document.getElementById("block"+source1);
            if(container.childNodes[1])container.removeChild(container.childNodes[1]);
            for (var i = 0; i < response.length; i++) {

                var block = {};
                source1 = parseInt(response[i].source);
                block.level = parseInt(response[i].level, 10);
                block.width = parseFloat(response[i].width);
                block.position = parseInt(response[i].position, 10);

                block.name = response[i].superCategory.toString();
                block.colour = response[i].statusColor.toString(); // colour
                arrayBlock.push(block);     
                }

            $('#block'+source1).Block({
                'height' : 300,
                'base' : 1200,
                'slices' : 4,
                'slice_separation' : 0.1,
                'colours' : [ 'red', 'yellow', 'green', 'blue' ],
                'text' : [ '1', '2', '3', '4' ],
                'source' : source1,
                'arrayBlock' : arrayBlock


            });
            setTimeout("createBlocks("+source1+")",3000);           
        },
        Error : function() {
            setTimeout("createBlocks("+source1+")",3000);
            alert("Error: loading the Blocks");
        }
    });

}

进一步的解释是我希望这个闪烁的动画在我收到来源的某个时间后出现。我怎么能这样做？

Answer 1

下面的代码只是制作一次闪烁的动画，以及之后的代码，每500毫秒重复一次。

function blinker(element, duration)
{
       element.style.opacity = 0;
       setTimeout(function(){  element.style.opacity = 1;}, duration);  
}

setInterval(function(){ blinker(document.getElementById("myTable"), 500) }, 500);

只需将您想要的内容分配给#myTable;

修改

如果你的元素是在AJAX请求之后创建的，你应该使用上面的函数：

将所有AJAX放在一个函数中：

function AjaxReq(callback) { $.ajax({ // your ajax settings .success : function(data) { callback(); } }); }

像这样调用上面的函数：

AjaxReq(function(){ Blinker(myElement, 500); });

为什么要做所有这些步骤？

当Javascript达到".success"状态时，它不会等待，直到脚本结束。当然，当JS达到".success"状态时，data尚未填充，因此，它仍然为空，这不会导致闪烁。你应该做的是改为添加一个回调，这使得javascript在完全接收数据后执行回调。换句话说，它在完全完成后等待状态＆＃39; .success＆＃39;，然后执行回调。如果，你的元素在从AJAX接收的data变量中的某个位置，那么将数据作为参数传递回调并在回调中使用它。

... .success : function(data) { callback(data); } ..

您可以在此处详细了解Javascript的这一功能： How do I return the response from an asynchronous call?

用Javascript实现闪烁效果

1 个答案: