CODEWITHSUNDEEP
javascriptjqueryanimation
HRo
HRo

Reputation: 115

JQuery fading in fading out continuously

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--;
        } 
    }
});

Upvotes: 3

Views: 4667

Answers (3)

HRo
HRo

Reputation: 115

I have fixed the problem. All this time the link element was missing its less than sign(>). So frustrated after 4 hours, I found my mistake.

Upvotes: 0

Daniel
Daniel

Reputation: 579

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;
}

Upvotes: 7

Zach Saucier
Zach Saucier

Reputation: 25954

Simply remove the while loop and it works perfectly 

$(document).ready(function () {
    $("#Imag1").fadeOut(3000);
    $("#Imag2").fadeOut(8000);
    $("#Imag3").fadeOut(6000);
    $("#Imag1").fadeIn(2000);
    $("#Imag2").fadeIn(5000);
    $("#Imag3").fadeIn(9000);
});

Working jsFiddle

EDIT

Since you want it endless, you can put the effects into another function and run it on the callback. Updated fiddle here

$(document).ready(function () {
    fadeThem();
});
function fadeThem() {
    $("#Imag1").fadeOut(3000, function() {
        $(this).fadeIn(2000, fadeThem());
    // Apply the callback to the one with the shortest combined animation time
    });
    $("#Imag2").fadeOut(8000, function() {
        $(this).fadeIn(5000);
    });
    $("#Imag3").fadeOut(6000, function() {
        $(this).fadeIn(9000);
    });
}

Upvotes: 2

Related Questions