JQuery fading in fading out continuously

animation, javascript, jquery

Solution

Here is my fiddle http://jsfiddle.net/m7HcT/1/ It creates a re-useable method for you to call on any element you want to flash.

HTML:

<div class='block' id='Imag1'></div>
<div class='block' id='Imag2'></div>
<div class='block' id='Imag3'></div>

jQuery:

fadeloop('#Imag1',1500,1200,true);
fadeloop('#Imag2',100,200,true);
fadeloop('#Imag3',3000,7000,true);

//The element is cached inside the function so we don't make 
//Multiple DOM calls on elements we have already found.
//Each Interval is completely independant

function fadeloop(el,timeout,timein,loop){
    var $el = $(el),intId,fn = function(){
         $el.fadeOut(timeout).fadeIn(timein);
    };
    fn();
    if(loop){
        intId = setInterval(fn,timeout+timein+100);
        return intId;
    }
    return false;
}

Problem

Currently the editor that I am using is Adobe Dreamweaver. In my editor the following statements work during trial, however in my browsers such as Safari, Mozilla, and Chrome my fade in and fade out is not working at all. I'd like for them to constantly fade out then fade back in, but the images still remain visible. Any incites as to why this is happening to me? ``` $(document).ready(function(){ var x=0; while(x==0 ){ $("#Imag1").fadeOut(3000); $("#Imag2").fadeOut(8000); $("#Imag3").fadeOut(6000); x++; if(x==1){ $("#Imag1").fadeIn(2000); $("#Imag2").fadeIn(5000); $("#Imag3").fadeIn(9000); x--; } } }); ```

Original source