javascript alert when element is visible

Question

i have the following code:

var blink1 = function() {
    $('.leftArrowMask').hide();
    setTimeout(blink2, 5000);
};
var blink2 = function() {
    $('.leftArrowMask').show();
    setTimeout(blink1, 1000);
};
$(document).ready(function() {
    setTimeout(blink1, 1000);
});

this basically shows a div for 1 second, and then hides it for 5 seconds.

I would like to display an alert everytime the div is visible.

i have tried the following but it doesnt seem to work:

function checkVisibility(){
  if ($('.leftArrowMask').is (':visible') && $('.leftArrowMask').parents (':hidden').length == 0)
  alert ("Visible!");
   setTimeout('checkVisibility',1000)//every 1 second...
}

any ideas on what could be wrong?

Answer 1

 var blink1 = function () {
        $('.leftArrowMask').hide();
        setTimeout(blink2, 5000);
    };
    var blink2 = function () {
        $('.leftArrowMask').show();
        setTimeout(blink1, 1000);
    };
    $(document).ready(function () {

        setInterval(function () {
            if ($('.leftArrowMask').is(':visible') && $('.leftArrowMask').parents(':hidden').length == 0) {
                alert("Visible!");
            }
            setTimeout(blink1, 1000);
        }, 1000);

        //
    });

See Demo

Hope helps