CODEWITHSUNDEEP
jquerytimeout
Barney
Barney

Reputation: 1848

jQuery fade in and out on timeout

This is a pretty common problem, but I am looking to fade out some text, change it then fade it back in.

My code so far is:

setTimeout(function(){
    $("#ilovequote").fadeOut( 500, function(){
     var ilovequotes = ["CSS3", "Photoshop", "AJAX", "jQuery", "Social Media API's"];
    var rand = ilovequotes[Math.floor(Math.random() * ilovequotes.length)];
    $('#ilovequote').html(rand);
        $("#ilovequote").fadeIn( 500);
    });
  }, 500);
});

But this for some reason does not work. I am looking for help on this, basically I would like a smooth animation with just long enough to read the word.

JS FIDDLE

http://jsfiddle.net/rJDWb/

Upvotes: 0

Views: 3884

Answers (2)

Samuel Liew
Samuel Liew

Reputation: 79032

Remove the extra });

setTimeout(function () {
    $("#ilovequote").fadeOut(500, function () {
        var ilovequotes = ["CSS3", "Photoshop", "AJAX", "jQuery", "Social Media API's"];
        var rand = ilovequotes[Math.floor(Math.random() * ilovequotes.length)];
        $('#ilovequote').html(rand);
        $("#ilovequote").fadeIn(500);
    });
}, 500);

[UPDATE]:

Swap your last two lines in your updated jsfiddle (lines 7 & 8)

http://jsfiddle.net/samliew/rJDWb/2/

Upvotes: 1

Anton
Anton

Reputation: 32581

Do you want something like this? 

var cnt = 0;
setInterval(function(){
cnt ==4 ? cnt=0:cnt++
    $("#ilovequote").fadeOut( 500, function(){
        var ilovequotes = ["CSS3", "Photoshop", "AJAX", "jQuery", "Social Media API's"];
        var rand = ilovequotes[cnt];
        $('#ilovequote').html(rand);
        $("#ilovequote").fadeIn( 500);
    });
},1000);

jsFiddle demo here http://jsfiddle.net/BMBDd/2/

Upvotes: 2

Related Questions