Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Konstantin Nikkari
Konstantin Nikkari
5,185 Points

Topic text with changing word. JQUERY or CSS?

I want to make an animation of changing words like here http://doyouimpress.com [14.04.2015 site topic]

This is what I have in my code

HTML

<h1 class="negative-topic">EXPERIENCE SERVICES OF 
  <span id="changing-word">SPECIAL</span><br /> REAL ESTATE AGENT
</h1>

JQUERY

(function(){

    // List your words here:
    var words = [
        'SPECIAL',
        'DILIGENT',
        'FRIENDLY',
        'WISE'
        ], i = 0;

    setInterval(function(){
        $('#changing-word').fadeOut(function(){
            $(this).html(words[i=(i+1)%words.length]).fadeIn();
        });
       // 2 seconds
    }, 2000);

})();

The code above works but I need some advices regarding it.

1)Using JQUEARY language how can I change color of these words? Eg. I'd like the FRIENDLY to be orange and WISE to be blue.

2)The mutual timer for change animation is 2 sec (2000). How is possible to let the SPECIAL word be 3s and all the rest only 1 seconds?

3)Should I rather use only CSS animations to achieve the desired effect or use JQUERY? I found nice tutorial here http://tympanus.net/codrops/2012/04/17/rotating-words-with-css-animations also it seems that doyouimpress.com site is using something similar to the tympanus.net tutorial. Atleast I couldn't find any JQUERY events related to this animation. Comparing my jquery code with the tympanus tutorial JQ is much more clearer and have less code.

Thanks alot!

2 Answers

Zachary Green
Zachary Green
16,359 Points
Zachary Green
Zachary Green
16,359 Points

sorry for the misunderstanding. 

(function(){

    // List your words here:
    var words = [
        'SPECIAL',
        'DILIGENT',
        'FRIENDLY',
        'WISE'
        ], i = 0,
         delay = 1;

    setInterval(function(){
        $('#changing-word').fadeOut(function(){
            var word = words[i=(i+1)%words.length]
            $(this).html(word).fadeIn();
            $(this).css('textColor', 'orange'); // or color of choice

            if (word == 'SPECIAL'){
             delay = 3;
            }else {
             delay = 1;
            }
        });
       // 2 seconds
    }, delay * 1000);

})();
Konstantin Nikkari
Konstantin Nikkari
5,185 Points

A huge thanks for the help! I really appreciate this :).

Zachary Green
Zachary Green
16,359 Points
Zachary Green
Zachary Green
16,359 Points

to answer the first question while inside the fadeout function you can change the text color of the words by doing $(this).css('textColor', 'orange') or you can use a hex value or rgba. http://api.jquery.com/css/#css-propertyName-value

on to the second question you can have a while loop set a var to the delay you want while a word is being displayed. something like this

setInterval(function(){
        $('#changing-word').fadeOut(function(){
             var word = words[i=(i+1)%words.length]
            $(this).html().fadeIn();
            if (word == 'SPECIAL'){
             delay = 3
            }else {
             delay = 1
            }
        });
       // 2 seconds
    }, delay);
Marcus Parsons
Marcus Parsons
15,718 Points

Zachary,

You'd have to have the delay either set to 3000 or 1000 in the if-else statements or use (delay * 1000); in the second argument of the setInterval function because that delay must be in milliseconds i.e.

setInterval(function(){
        $('#changing-word').fadeOut(function(){
             var word = words[i=(i+1)%words.length]
            $(this).html().fadeIn();
            if (word == 'SPECIAL'){
             delay = 3;
            }else {
             delay = 1;
            }
        });
       // 2 seconds
    }, (delay * 1000));
Zachary Green
Zachary Green
16,359 Points
Zachary Green
Zachary Green
16,359 Points

you are correct Marcus my mistake

Marcus Parsons
Marcus Parsons
15,718 Points

No worries!

Konstantin Nikkari
Konstantin Nikkari
5,185 Points 
(function(){

    // List your words here:
    var words = [
        'SPECIAL',
        'DILIGENT',
        'FRIENDLY',
        'WISE'
        ], i = 0;

setInterval(function(){
        $('#changing-word').fadeOut(function(){
             var word = words[i=(i+1)%words.length]
            $(this).html().fadeIn();
            if (word == 'SPECIAL'){
             delay = 3;
            }else {
             delay = 1;
            }
        });
       // 2 seconds
    }, (delay * 1000));

})();

This code above is not working for me. Words are not changing. Are you sure about the code?

Also I don't understand where exactly I should put the $(this).css('textColor', 'orange'). I just started to learn JQUERY and struggle to understand the logic. Anyway, are you sure about the code above? Is it like this?

    var words = [
        'SPECIAL',
        'DILIGENT' $(this).css('textColor', 'orange'),
        'FRIENDLY' $(this).css('textColor', 'red'),
        'WISE'
        ], i = 0;