CODEWITHSUNDEEP
jqueryloopstimerintervals
cyclone200
cyclone200

Reputation: 387

Infinite timer loop

I'd like to match a progress bar with an image slideshow in which images are fading every 3,5 seconds.

The progress bar should fill the screen (matching the duration of a slide) then disappear and reappear for a new slide.

Now, I have this :

function progress(percent, $element) {
    $element.find('div').animate({width:percent+'%'}, 3500);
}

progress(100, $('#progressBar'));
var progressClone = $('#progressBar').clone();

setInterval(function() {
    $('#progressBar').remove();
    $(progressClone).appendTo('#wrapBg');
    progress(100, $('#progressBar'));
}, 3500);

It works fine but only two times. Then at the third slide, the progress bar doesn't disappear...

I have no error in the console...

HTML : 

<div id="wrapBg">
    ///SLIDER ///
    <div id="progressBar"><div></div></div>
</div>

Do you know what is the problem?

Upvotes: 0

Views: 183

Answers (1)

Donnie D&#39;Amato
Donnie D&#39;Amato

Reputation: 3940

I'm not totally confident in all of this, but one of problems is that you are cloning an element with an id (there should only be one element with an id). However, jQuery might be searching for all elements with that id (not sure) and when you remove it, you probably aren't able to clone it. Instead, you might want to think about creating the element dynamically and appending to the slideshow.

//inside the interval
$('#progressBar').remove();
var progressBar = $('<div/>').prop('id', 'progressBar').html('<div/>');
progressBar.appendTo('#wrapBg');
progress(100, progressBar);

Upvotes: 1

Related Questions