CODEWITHSUNDEEP
javascriptjquery
George.P
George.P

Reputation: 53

JavaScript timing, jQuery fadeIn fadeOut

I have a simple function that I wrote that transitions three div elements using a fade in/out effect. The event is triggered when a user clicks a link. Here's my code:

$(".link1").click(function () {
   $(".feature1").fadeIn(1000);
   $(".feature2").fadeOut(1000);
   $(".feature3").fadeOut(1000);
});

$(".link2").click(function () {
   $(".feature1").fadeOut(1000);
   $(".feature2").fadeIn(1000);
   $(".feature3").fadeOut(1000);
});

$(".link3").click(function () {
   $(".feature1").fadeOut(1000);
   $(".feature2").fadeOut(1000);
   $(".feature3").fadeIn(1000);
});

I need to be able to set some sort of timer so that these transitions happen automatically every 8 seconds or so. I also want them to "loop" essentially, so that if we get to the third div in the set, it returns to the first div.

Upvotes: 2

Views: 192

Answers (4)

peter
peter

Reputation: 185

For timing issues in jQuery use the plugin jquery-timing.

Select all your .feature* in jQuery and then:

$(".feature1,.feature2,.feature3").repeat()
    .each($).fadeIn(1000).siblings().fadeOut(1000).wait(3000).all()

Nice. Isn't it?

See this running on jsfiddle.

Upvotes: 0

xkeshav
xkeshav

Reputation: 54016

I have tried something. please see Working DEMO

HTML

<a class="link1" href="javascript:void(0)"> Link1 </a>
<a class="link2" href="javascript:void(0)" > Link2 </a>
<a class="link3" href="javascript:void(0)" > Link3 </a>
<div class="feature1">Feature1 div</div>
<div class="feature2">Feature2 div</div>
<div class="feature3">Feature3 div</div>​

CSS

a { font:bold 13px verdana; padding:4px}
div { border:1px solid grey; padding:3px;width:150px;height:90px;margin:3px;}
.feature1 { background-color: #f00; }
.feature2 { background-color: #0f0; }
.feature3 { background-color: #00f; }​

jQuery

(function () {
    var i =0;
    var doFade= function() {        
        i = (i%3)+1;
        //console.log(i);
        $("div[class^=feature]").fadeOut(1000);
        $('.feature'+i+'').fadeIn(1000);                
    };
    doFade();
    window.setInterval(doFade, 2000);
})();​

Upvotes: 0

Adam Merrifield
Adam Merrifield

Reputation: 10407

http://jsfiddle.net/F4X46/1/

var i = 1,
    t;

function makeTO() {
    t = setTimeout(function() {
        console.log('test');
        if (i++ === 3) {
            i = 1;
        }
        $(".link" + i).trigger('click');
    }, 8000);
}
$(".link1").click(function() {
    i = 1;
    clearTimeout(t);
    makeTO();
    $(".feature1").fadeIn(1000);
    $(".feature2").fadeOut(1000);
    $(".feature3").fadeOut(1000);
});

$(".link2").click(function() {
    i = 2;
    clearTimeout(t);
    makeTO();
    $(".feature1").fadeOut(1000);
    $(".feature2").fadeIn(1000);
    $(".feature3").fadeOut(1000);
});

$(".link3").click(function() {
    i = 3;
    clearTimeout(t);
    makeTO();
    $(".feature1").fadeOut(1000);
    $(".feature2").fadeOut(1000);
    $(".feature3").fadeIn(1000);
});
makeTO();

Upvotes: 1

Kevin Beal
Kevin Beal

Reputation: 10849

Is this kind of what you mean?

setInterval(myFunction,8000);

The setInterval function in javascript runs a function every (in this case) 8 seconds set in it's second parameter. You'll notice there are no parenthesis when you call your function.

You can also call an anonymous function like this:

setInterval(function(){alert("Hello")},3000);

If you want to be able to control this via a click event you can do something like this:

var loop;
$(elem).click(function(){
    loop = setInterval(fades,8000);
});

function fades(){
    $(".feature1").fadeOut(1000);
    $(".feature2").fadeIn(1000);
    $(".feature3").fadeOut(1000);
}

And you can stop the loop this way: clearInterval(loop);

Upvotes: 2

Related Questions