jqueryloopsfadeinfadeout

Blinking an item. (Jquery FadeIn FadeOut ?)

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.

Solution

  • 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.