achieve Blinking effect with Javascript

Question

I want to add a flash-animation of an object so it "blinks" when something happens. How can I do this in Javascript?

I want the "block" object to blink.

    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");
        }
    });

}

A further explanation would be that I want this blinking animation to appear after a certain time that I have received source. How can I do this?

you can add eventhandler for _"somthing happens"_ and in this handler change css parameters your object — Grundy, Aug 04 '14 at 08:17
I have an array of blocks, I want these blocks to "flicker" when something happens. What is the easiest way of doing that in the JavaScript part? — benskiiii, Aug 04 '14 at 08:19

score 1 · Answer 1 · edited May 23 '17 at 12:06

1

Following code just makes one-time animation of the blink, and the code coming after, repeats it each 500 ms.

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

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

Just assign what ever you want to the #myTable;

EDIT:

If your element is created after the AJAX request, you should use the function above like this:

Put all your AJAX inside a function:

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

Call the above function like this:

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

Why to do all of these steps?

When Javascript reaches ".success" state, it does not wait, it passes until the end of the script. Naturally, when JS reaches ".success" state, data has not yet been populated, so, it is still null, and this causes no blinking. What you should do, is to instead add a callback, which makes the javascript to execute the callback after the data has been fully received. In other words, it waits, after full completion to the state '.success', and then executes the callback. If, your element is somewhere inside the data variable received from AJAX, then pass the data as argument the callback and use it inside the callback.

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

You can read more about this feature of Javascript here: How do I return the response from an asynchronous call?

edited May 23 '17 at 12:06

Community

1
1

answered Aug 04 '14 at 08:20

Mostafa Talebi

8,825
16
61
105

I added some code, will it still work? I'm trying at the moment but can't get it to work, I changed myTable to a block object instead – benskiiii Aug 04 '14 at 08:32
add an id to your block element, and then replace myTable with that id (without #). Is your element created after the AJAX request? – Mostafa Talebi Aug 04 '14 at 08:33
OK. Yes, it renders after the ajax request – benskiiii Aug 04 '14 at 08:35
Hmm, I don't know what you mean. Is it possible for you to show with code? – benskiiii Aug 04 '14 at 08:39
Also, the opacity is undefined it says.. Do I need to define some kind of opacity or..? – benskiiii Aug 04 '14 at 08:48
see the updated the question, and then if any, ask your questions – Mostafa Talebi Aug 04 '14 at 08:55
what I have proposed is fully tested, you have to check the console error for javascript. There must be a bad code or something else which prevents this from functioning properly, You can also report you errors here – Mostafa Talebi Aug 09 '14 at 05:45

achieve Blinking effect with Javascript

1 Answers1