simple advert changer - each() loop won't delay()

Question

I am trying to create advertisement box which simply changes picture after given time. I used each() loop to hide and display images one after another but all i get is same time effect on all pictures. Any clue how to fix that ?

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title of the document</title>
    <link rel="stylesheet" type="text/css" href="advert.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <style>
        .advert{
            position: relative;
        }
        .advert img{
            position: absolute;
            /*visibility: hidden;*/
        }
    </style>
</head>

<body>
    <div class="advert">
        <img src="img/img1.jpg" alt="Smiley face" height="" width="">
        <img src="img/img2.jpg" alt="Smiley face" height="" width="">
        <img src="img/img3.jpg" alt="Smiley face" height="" width="">
    </div>
</body>

<script>
    $(function(){
        function simpleAdvert(){
            var section = $('.advert');
            var images = section.find('img');
            images.each(function(){
                $( this ).fadeToggle(5000).fadeToggle(5000).delay(10000);
                console.log($( this ));
            });
        }

        simpleAdvert();
    });
</script>

</html>

Ram · Answer 1 · 2015-04-12T06:20:06.620

1

You should call the delay before the fadeToggle method and if you want to show the images one by one you can use the index of the element in the set:

// using fadeIn() method
images.each(function(index) {
    // since the indices are zero-based 
    // the first element is shown without delay
    // you can add 1 to the index: 10000 * ++index
    $(this).hide().delay(10000 * index).fadeIn(5000);

A suggestion:

function simpleAdvert() {
    var section = $('.advert');
    var images = section.find('img').hide();
    images.each(function(index) {
        $(this).delay(10000 * index).fadeIn(5000);
    });
}

edited Apr 12 '15 at 06:20

answered Apr 12 '15 at 06:06

Ram

143,282
16
168
197

yeh it works but what if i would like to make it loop over and over ? i tryied to call it from inside the function but it just roll so quickly that you can't even see when it changes. – DevWL Apr 12 '15 at 06:32
@GlupiJas There are many related questions on SO. One of them is: http://stackoverflow.com/questions/2741360/jquery-fadein-fadeout-divs-over-set-interval. 10s * n and 5s is not that fast, I'm not sure why you can't see the changes. – Ram Apr 12 '15 at 06:44

score 1 · Accepted Answer · answered Apr 12 '15 at 06:45

.each(function) calls the function for each item in the array immediately, which is why the time effect is applied to all items rather than doing what you expect. To get the pictures to show/hide in a loop you need something like a setInterval which calls a function repeatedly. This should work:

$(function(){
    var timeToShow = 750;
    var timeToFade = 250;
    var timeTotal = timeToShow + timeToFade;

    function simpleAdvert(){
        var section = $('.advert');
        var images = section.find('img');
        var index = 0;
        images.hide();
        $(images[0]).show();
        setInterval(function() {
            var next = (index + 1) % images.length;
            $(images[index]).fadeToggle(timeToFade);
            $(images[next]).fadeToggle(timeToFade);
            index = next;
        }, timeTotal);
    }

    simpleAdvert();
});

Essentially this hides all images except the first, then fades out the shown picture and fades in the next picture on an interval.

The solution in @Vohuman 's comment is a lot more compact, I like that one. — concrete_d, Apr 12 '15 at 06:49
Actually the accepted answer of that question could be more compact: http://stackoverflow.com/questions/20611506/jquery-testimonial-fader-does-not-work-smoothly/20611582#20611582. Or more efficient: http://stackoverflow.com/questions/19246819/text-to-text-how-i-fix-it/19247666#19247666 — Ram, Apr 12 '15 at 06:54
It is good enough for me :) did the job. I added one more parameter to your script - timeDelay and random slide on the start. I might even re post it maybe someone else would find it useful. Thanks :) concrete_d and Vohuman for your help. — DevWL, Apr 12 '15 at 07:16

score 0 · Answer 3 · answered Apr 12 '15 at 07:18

It's a small extension to working script by concrete_d (Accepted answer). + custom time delay with no animation + and random slide on the script start

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title of the document</title>
    <link rel="stylesheet" type="text/css" href="advert.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <style>
        .advert{
            position: relative;
        }
        .advert img{
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="advert">
        <img src="img/img1.jpg" alt="Smiley face" height="" width="">
        <img src="img/img2.jpg" alt="Smiley face" height="" width="">
        <img src="img/img3.jpg" alt="Smiley face" height="" width="">
    </div>
</body>

<script>
$(function(){
    var timeToShow = 500;
    var timeDelay = 5000;
    var timeToFade = 500;
    var timeTotal = timeToShow + timeToFade + timeDelay;
    var minimum = 0;
    var maximum =  $('.advert').find('img').length - 1;
    var randomnumber = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;
    console.log(randomnumber);
    function simpleAdvert(){
        var section = $('.advert');
        var images = section.find('img');
        var index = randomnumber;
        images.hide();
        $(images[randomnumber]).show().delay(timeDelay);
        setInterval(function() {
            var next = (index + 1) % images.length;
            $(images[index]).fadeToggle(timeToFade);
            $(images[next]).fadeToggle(timeToFade);
            index = next;
        }, timeTotal);
    }

    simpleAdvert();
});
</script>

</html>

simple advert changer - each() loop won't delay()

3 Answers3