Blinking an item. (Jquery FadeIn FadeOut ?)

Question

I have two divs that I want to make blink at the same time until the user hovers the mouse on one of them.

var shouldiblink = '1';

function mrBlinko(divid){
 while (shouldiblink =='1') {
 $("#"+divid).fadeIn(100).fadeOut(300);
}

$(document).ready(function(){
 mrBlinko("mydiv1");
 mrBlinko("mydiv2");
}

The I'll have an hover event that sets shouldiblink to '0'. Problem is that the loops starts as soon as the page is ready and the browser crashes.

I'm stuck with this solution and I can't think of an alternative right now.

Can you help me?

Thank you very much.

Answer 1

I think the better way will be to use setInterval and clearInterval.

Once the page is loaded use setInterval to get the effect going. When the user hovers the mouse over the element then clear the interval using the interval id attained for setInterval.

See a working demo.

Answer 2

One of the alternatives - Pulsate effect from jQuery UI.

Include it from google API in order to improve performance.

---

If you want to roll your own solution, you might find useful checking out source code of pulsate effect.

Answer 3

As much as I hated the <blink> tag, try this:

$.fn.blink = function(opts) {
   // allows $elem.blink('stop');
   if (opts == 'stop') {
     // sets 'blinkStop' on element to true, stops animations, 
     // and shows the element.  Return this for chaining.
     return this.data('blinkStop', true).stop(true, true).show();
   }

   // we aren't stopping, so lets set the blinkStop to false,
   this.data('blinkStop', false);

   // load up some default options, and allow overriding them:
   opts = $.extend({}, {
     fadeIn: 100,
     fadeOut: 300
   }, opts || {} );

   function doFadeOut($elem) {
     $elem = $elem || $(this); // so it can be called as a callback too
     if ($elem.data('blinkStop')) return;
     $elem.fadeOut(opts.fadeOut, doFadeIn);
   }
   function doFadeIn($elem) {
     $elem = $elem || $(this);
     if ($elem.data('blinkStop')) return;
     $elem.fadeIn(opts.fadeIn, doFadeOut);
   }
   doFadeOut(this);
   return this;
 };

 // example usage - blink all links until you mouseover:
 // takes advantage of the jQuery.one() function so that it only calls the 
 // stop blink once
 $('a').blink({fadeIn: 500, fadeOut: 1500}).one('mouseover', function() { 
   $(this).blink('stop') 
 });

 // 30 seconds after we started blinking, stop blinking every element we started:
 setTimeout(function() { 
   $('a').blink('stop');
 }, 30000);

 // example that should do what you wanted:
 $("#mydiv1,#mydiv2").blink().one('mouseover', function() {
   $(this).blink('stop');
 });

Answer 4

Here is an alternate solution using the completion callback of jQuery.

You can add 'selected-pulsate' to an element at any time and call setPulsate(), and it will start pulsating. To clear all current pulsators you can call clearSelection() which just removes the class and forces it to be hidden.

There is a line in clearSelection() [clearTimeout()], which I'm not sure is necessary. In my extremely basic testing, it works without that line, but I am not sure whether there is a possibility the timer may still be running at that point and cause issues.

I was also not certain whether calling RepeatCall() within the fadeOut() complete callback would cause a stack overflow, so I used setTimeout with a small value of 10msec to call the function again instead of doing it directly.

var currentPulsatorId = -1;

function clearSelection() {
    if (currentPulsatorId != -1) {
        clearTimeout(currentPulsatorId); /* needed? */
        currentPulsatorId = -1;
    }

    var curElems = $('.selected-pulsate');
    $(curElems).removeClass('selected-pulsate');
    $(curElems).hide();
}

function setSelection(elems) {
    $(elems).addClass('selected-pulsate');
    setPulsate();
}

function setPulsate() {
    // trigger
    RepeatCall();

    function RepeatCall()
    {
        $('.selected-pulsate').fadeIn(400, function() {
            $('.selected-pulsate').fadeOut(400, function() {
                // set timeout quickly again
                // call externally to avoid stack overflow
                currentPulsatorId = setTimeout(RepeatCall, 10);
            });
        });
    }
}