How to repeat (loop) Jquery fadein - fadeout - fadein

Question

I am struggling with my first jQuery script. I've got a DIV on my page that is set to hide via CSS. Then, I have this script that runs to make it fade in, fade out, then fade in again:

<script type="text/javascript">
  (function($) {
    $(function() {
      $('#abovelogo').fadeIn(1000).delay(2000).fadeOut(1500).delay(2000).fadeIn(1500);
    }); 
  })(jQuery);
</script>

This part works fine. Now, my question:

How do I change it so that this script runs loops (forever) instead of just once?

Thanks in advance! -Nate

Solution 1

Put your code inside a setInterval:

$(function () {
    setInterval(function () {
        $('#abovelogo').fadeIn(1000).delay(2000).fadeOut(1500).delay(2000).fadeIn(1500);
    }, 5000);
});

Since you will be running this as long as the page is active then you should do everything you can to optimize your code, for instance you can cache the selection outside of the interval:

$(function () {
    var $element = $('#abovelogo');
    setInterval(function () {
        $element.fadeIn(1000).delay(2000).fadeOut(1500).delay(2000).fadeIn(1500);
    }, 5000);
});

Docs for setInterval: https://developer.mozilla.org/en/window.setInterval

Also, instead of using .delay() you can use the callback functions in each animation to call one animation after another:

$(function () {
    var $element = $('#abovelogo');
    setInterval(function () {
        $element.fadeIn(1000, function () {
            $element.fadeOut(1500, function () {
                $element.fadeIn(1500)
            });
        });
    }, 5000);
});

Here is a demo: http://jsfiddle.net/xsATz/

You can also use setTimeout and call a function recursively:

$(function () {
    var $element = $('#abovelogo');
    function fadeInOut () {
        $element.fadeIn(1000, function () {
            $element.fadeOut(1500, function () {
                $element.fadeIn(1500, function () {
                    setTimeout(fadeInOut, 500);
                });
            });
        });
    }

    fadeInOut();
});

Here is a demo: http://jsfiddle.net/xsATz/1/

Solution 2

<script type="text/javascript">
function doFade() {
    $('.foo').toggleClass('fooAct');
    setTimeout(doFade, 1000);
}
$(document).ready(function(){
    doFade();
});
</script>
<style>
div {
height:200px;
background:black;   
}
.foo {
transition: opacity 2s;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s; /* Opera */
opacity:0.1;
}
.fooAct {
opacity:1;
}
</style>
<div class="foo"></div>

just for imagination. You can do it with css3. I hope that can help you too. Doing this kind of things, css should be more confortable for browser performance instead of jQuery.

Solution 3

I have some problmes with setTimeout method. Maybe is better with "trigger":

var $element = $('.banner');
$element.bind('cusfadeOut',function() {
        $(this).fadeOut(500,function() {
                $(this).trigger('cusfadeIn');
        });
});
$element.bind('cusfadeIn',function() {
        $(this).fadeIn(1000, function() {
                $(this).trigger('cusfadeOut');
        });
});
$element.trigger('cusfadeOut');

Comments

[Cameron Fredman]

I'm not sure this qualifies as an answer. Can you clarify a bit?

[Admin]

When using "Timeout", it may be that the event "fadeIn" is released before the end "fadeOut" (depending on how fit the times). With triggers, that never happens. Launches only when fadeIn fadeOut has completed, and you can define any timing without adjusting the "timeouts".