views:

35

answers:

3

On Envylabs' site they have a feature where, below the logo, some text keeps changing after a few seconds.

I'm trying to find out what kind of JS/jquery function would do that. Can someone point to a tutorial for this?

A: 

They use fadeIn/fadeOut together with setTimeout()

You'll find it in http://envylabs.com/javascripts/all.js?1278040567 Line:15

var SubtitleCycle={...}
Dr.Molle
A: 

@samwick : Here is the script that can help you through the point which you are looking for, Try it out!

fadeRecord = function() {
var self = this;
var opacity = 0;
this.recordToEdit.style.opacity = opacity;      

var timeInterval = setInterval(
        function() {            
            opacity += 1;               
            self.recordToEdit.style.opacity = opacity/10;
            if(opacity/10 == 1) {
                self.recordToEdit = null;
                clearInterval(timeInterval);
            }
        },
        100
    );  

};

iSearch
+1  A: 

You should be using setInterval together with fadeIn and fadeOut to do this. Something like this will work:

var taglines = ['Hello world!', 'Over the rainbow', 'Seeing is believing', 'Bloody hell where am I going?'], 
    count = 0;

setInterval(function(){
    $('#tagline').fadeOut(300, function(){
        $(this).text(taglines[(count++)%taglines.length]).fadeIn(300);
    })
}, 3000);

See: http://jsfiddle.net/7n9Md/

Yi Jiang