Fade In/out Between Two Divs On A Loop

How would i go about make two divs fade in/out alternating between the two, so that only one is visible at a time? And also make it in a never ending loop? Thanks in advance!! I kn

Solution 1:

Here's my own version a la fiddle

http://jsfiddle.net/3KydB/

window.switchIn = function () {
    $('.red').fadeToggle(function() {
        $('.blue').fadeToggle(function() {
            setTimeout(function() {window.switchOut();}, 500);
        });
    });

}

window.switchOut = function () {
    $('.blue').fadeToggle(function() {
        $('.red').fadeToggle(function() {
            setTimeout(function() {window.switchIn();}, 500);
        });
    });

}

setTimeout(function() {window.switchIn();}, 500)

Solution 2:

The solution for your question is a little more tricky than a simple fadeToggle because you don't want either DIV to display at the same time. The key is to chain the fade actions together, so the next fade action won't execute until the previous one has completed.

Logically, you want: DIV1 fade in, DIV1 fade out, DIV2 fade in, DIV2 fade out, repeat.

My solution below will take any two elements on the page and oscillate their visibility without showing either one at the same time. iDuration specifies the time for each transition in milliseconds.

Working example

HTML:

<div id="div1" style="display:none;">DIV #1</div>
<div id="div2" style="display:none;">DIV #2</div>

JavaScript:

functionrunToggle(iDuration, domFirst,domSecond) {
        $(domFirst).fadeToggle(iDuration, "linear",function() {
          $(domFirst).fadeToggle(iDuration, "linear",function() {
            $(domSecond).fadeToggle(iDuration,"linear",function() {
              $(domSecond).fadeToggle(iDuration,"linear",function() {
                  setTimeout(function() {
                      runToggle(domFirst,domSecond) ;
                  },50);
              });
            }); 
          });
       }); 
};

runToggle(1000, $('#div1'),$('#div2'));

I use the setTimeout not for timing purposes, but just to free up the JavaScript interpreter so the browser can do other things while this fade loop is running.

Solution 3:

How are you, you can do this.

setInterval() - executes a function, over and over again, at specified time intervals;

setInterval(code,millisec,lang)

So, you can create a function that make it. an Example

<divid="one"style="display:none;"></div><divid="two"></div><script>
$(function(){
setInterval(function(){MakeToggleDivs();},1000);
});
functionMakeToggleDivs(){
$('#one').fadeToggle(400);
$('#two').fadeToggle(400);
}
</script>

And this has to work, tell me if it doesn't.

Good luck!