jQuery fadeIn fadeOut Variable Interval

Question

I am trying to create a fadein fadeout animation where The individual items are shown for an specific interval on the screen but the gap between the fadeout of active and fadein of next item is different.

So suppose we have a group of images and I want the images to appear on screen for 5 seconds and when a image hides and next image shows I want a variable time difference between each interval.

This is what I have tried but its not working like the way I need it

<script>
var myVar = setInterval(function(){myTimer()}, 5000);

function myTimer() {
var $active = $('#cycler .active');
      var $next = ($active.next().length > 0) ? $active.next() : $('#cycler img:first');
      $active.fadeOut().removeClass('active');
      $next.delay(getRandomArbitary(5,20)*1000).fadeIn().addClass('active');
}

function getRandomArbitary (min, max) {
    return Math.random() * (max - min) + min;
}
</script>
<style>
#cycler{position:relative;}
#cycler img{position:absolute;display:none; max-width:250px;}
#cycler img.active{z-index:3; display:block;}
</style>

<div id="cycler">
     <img src="images/p1.jpg" class="active">
    <img src="images/p2.jpg">
    <img src="images/p3.jpg">
    <img src="images/p4.jpg">
 </div>

Here is the fiddle

I don't understand what you're trying to achieve, the image shows for a *duration* of 5 seconds, then cycles to the next. You want the *interval* between images to be random? — Jongosi, May 27 '14 at 11:47
@Jongosi the thing is that the image will remain on screen for 5 seconds but when when one image hides and next image shows the difference between the hide/show is random. — Nirmal Ram, May 27 '14 at 11:50
@NirmalRam Ok, you mean the difference between the hide/show *needs to be* random? — Jongosi, May 27 '14 at 11:55
@Jongosi Yes, So the image stays for 5 seconds on screen an then hides and then the next image shows after dynamic time interval. — Nirmal Ram, May 27 '14 at 11:58

score 1 · Accepted Answer · edited May 23 '17 at 12:11

A problem with setInterval() is that it doesn't wait for the code within it to finish. Since the code in this case runs exactly every five seconds, it may fade pictures out way earlier because part of the five second interval goes to having the picture invisible. If this pause between images happens to be five seconds as well, the following picture will just become visible in time for the next loop of code to fade it out again.

Using some help I found in this answer I created a looping function with some nested setTimeouts that should give you a working result. I also put a small delay on the removeClass-function since it seemed to slightly interfere with the fadeOut when they were run at the same time. Here is the new javascript, also found here as an updated jsfiddle.

function loop () {
    var randDelay = getRandomArbitary(5, 1000);
    var $active = $('#cycler .active');
    var $next = ($active.next().length > 0) ? $active.next() : $('#cycler img:first');
    setTimeout(function(){
        $active.fadeOut();
        setTimeout( function(){
            $active.removeClass('active');
        }, 500);
        setTimeout( function(){ 
            $next.fadeIn().addClass('active');
            if (true) {
            loop();
        }
        }, randDelay + 500);
    }, 5000)
}

function getRandomArbitary ( ratio, factor ) {
    var randInterval = Math.floor(Math.random() * ratio);
    return randInterval * factor;
}

loop();

Jongosi · Answer 2 · 2014-05-27T12:14:55.800

After clarification from the comments, I think this is what you're after. We call the fadeIn() after a random interval set by your getRandomArbitary function, which I've modified.

Only the javascript has been altered:

var myVar = setInterval(function(){myTimer()}, 5000);

function myTimer() {
    var $active = $('#cycler .active');
    var $next = ($active.next().length > 0) 
        ? $active.next() 
        : $('#cycler img:first')
    ;
    $active.fadeOut().removeClass('active');
    var randDelay = getRandomArbitary(5, 1000);
    setTimeout( function(){
        $next.fadeIn().addClass('active');
    }, randDelay);
}

function getRandomArbitary( ratio, factor ) {
    var randInterval = Math.floor(Math.random() * ratio);
    return randInterval * factor;
}

Here's the updated fiddle: http://jsfiddle.net/6cPHh/27/

This seems to be working but if you observe closely it isn't doing it correctly. — Nirmal Ram, May 27 '14 at 13:05

jQuery fadeIn fadeOut Variable Interval

2 Answers2