CODEWITHSUNDEEP
jquerysetintervalslidetoggle
ToddN
ToddN

Reputation: 2961

jQuery simple setInterval to slideToggle

I'm looking to use slideToggle() on some divs automatically every 10 seconds or so. In the example below I want SET 2 to slideToggle() in after 10 seconds, 10 seconds after that, I want SET 3 to slideToggle() in, 10 seconds after that, I want to loop around and slideToggle() SET 1 back in (kind of like the carousel plugin):

<style>
    .ftdmfg2, .ftdmfg3 {
        display:none;
    }
</style>

<div align="center" id="featuredmfgs">
    <h2>Featured Manufacturers</h2>
    <div class="ftdmfg1"> SET 1 </div>
    <div class="ftdmfg1"> SET 1 </div>
    <div class="ftdmfg1"> SET 1 </div>
    <div class="ftdmfg1"> SET 1 </div>
    <div class="ftdmfg2"> SET 2 </div>
    <div class="ftdmfg2"> SET 2 </div>
    <div class="ftdmfg2"> SET 2 </div>
    <div class="ftdmfg2"> SET 2 </div>
    <div class="ftdmfg3"> SET 3 </div>
    <div class="ftdmfg3"> SET 3 </div>
    <div class="ftdmfg3"> SET 3 </div>
    <div class="ftdmfg3"> SET 3 </div>
</div>

Upvotes: 2

Views: 1081

Answers (3)

Karsten
Karsten

Reputation: 1866

This jQuery script should do what you wanted:

$(function() {
var num = 1;
var nummax = 3
var toggletime = 10000;
setTimeout(toggle, toggletime);

function toggle() {
    $('.ftdmfg'+num.toString()).slideToggle();
    num++;
    if (num > nummax) num = 1;
    $('.ftdmfg'+num.toString()).slideToggle();
    setTimeout(toggle, toggletime);
}

}

Upvotes: 2

Senad Meškin
Senad Meškin

Reputation: 13756

function slideSet(setNum) {
  //jquery slide
  var nextSet = setNum +1;
if(nextSet > 3)
 nextSet = 1;

setTimeout(function() { slideSet(nextSet); }, 10000);
}

Upvotes: -1

RichW
RichW

Reputation: 469

Pretty good example here - Jquery slideToggle

Upvotes: 0

Related Questions