jQuery onClick has to lead to intermittent display of a <div> or image

Question

I would like the user of my website to be able to click on an image or div, which will provoke the intermittent display of the element. A sort of stroboscopic-like effect in the following fashion (http://goo.gl/7uk7i5) except that I want this element to be hidden, thus revealing the content that is underneath it.

The inspiration for this effect I took from a past SO thread: http://goo.gl/ks0oJN. So the question here is: can I have actual control over the flickering when hovering over and/or click upon the element? Maybe with some jQuery or Javascripting?

Ideally, the code would allow the user to have some control over the flickering. That is, one click, leads to a certain speed; two clicks, to another speed; third click, back to static display.

Thanks for your help.

Answer 1

If I understand your issue correctly, you're wanting to control the flicker effect that your fiddle is demonstrating. The short answer is no.

This effect is caused by the way :hover works, which updates every pixel the mouse moves. You've given the hover effect visibility:hidden so when you hover on the element it collapses, but now you're no longer hovering over it, so the :hover no longer applies. This is reflected on the next pixel which shows the full element again.

The solve for this issue is in this fiddle demo

edit You can't control this via CSS, but look below and see if that works for you.

Working Demo

HTML:

 <div class="vis-1">
    <div>
        Lorem Ipsum
    </div>
</div>

CSS:

body > div {
    height:100px;
    width:100px;
    margin-bottom: 15px;
}
.vis-1 div {
    height:inherit;
    width:inherit;
    background: lightblue;
}

JS:

$('.vis-1').hover(
    function () {
        (function flicker () {
            $('.vis-1 div').fadeIn(10).delay(50).fadeOut(10);

            flickerTimer = setTimeout(function () {
                flicker();
            }, 100);
        })();
    }, function () {
        clearInterval(flickerTimer);
        $('.vis-1 div').stop(true,true).fadeIn(10);
    }
);