jQuery font color animation with loop

user_12501851 0
Viewed 125

I need a jQuery color animation without CSS3 functions.

I coded this:

function button_selection() {
    setTimeout(button_selection, 800);
    setTimeout(function () { $(".color").css("color", "yellow"); }, 200);
    setTimeout(function () { $(".color").css("color", "blue"); }, 400);
    setTimeout(function () { $(".color").css("color", "red"); }, 600);
    setTimeout(function () { $(".color").css("color", "green"); }, 800);
}
setTimeout(button_selection, 0);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="color">Hello world, I love you all.</h1>

In my browser, it works. But I think that the code is not really "good". How would it be possible to write the colors in one line and then just control the speed?

Thanks.

jquery javascript
5 Answers

I would go with this 

const colors = ['yellow', 'green', 'blue', 'red']
const INTERVAL = 200;

colors.forEach((color, index) => {
  setTimeout(() => { $('.color').css("color", colors[index]) }, index*INTERVAL) 
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<h1 class="color">Hello world!<h1>

user_84150070

You could store all the colors in an array and then using an incremental variable to assign the colors with index.

And also you could use setInterval instead of setTimeout.

function button_selection() {
    let colors = ["yellow", "blue", "red", "green"];
    let index = 0;
    $(".color").css("color", colors[index]);
    setInterval(() => {
        ++index;
        if (index >= colors.length) index = 0;
        $(".color").css("color", colors[index]);
    }, 1000);
}
setTimeout(button_selection, 0);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="color">Hello world, I love you all.</h1>

user_41489020

You don't need jQuery. Make a counter, increment it every n milliseconds and set the color depending on the counter state.

const element = document.querySelector('.color');
const colors = ['yellow', 'blue', 'red', 'green']; // The colors you want
const colorDuration = 200; // The duration of a color in milliseconds
let colorIndex = 0;

function switchColor() {
    element.style.color = colors[colorIndex++ % colors.length];
}
switchColor();
setInterval(switchColor, colorDuration);
<h1 class="color">Hello world, I love you all.</h1>

user_11187090

Crate an array and assign the key/value pairs to the values you want to iterate through. Then use $.each() to iterate over that array within your function. 

function button_selection() {
    setTimeout(button_selection, 800);
    let colors = {"yellow": 200, "blue": 400, "red": 600, "green": 800};
    $.each( colors, function( key, value ) {
      setTimeout(function () { $(".color").css("color", key); }, value);
    });    
}
setTimeout(button_selection, 0);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="color">Hello world, I love you all.</h1>

user_15335920

maybe this works for you:

const CONFIG = {
  colors: ['yellow', 'blue', 'red', 'green'],
  speed: 200
};

function button_selection() {
  let counter = 0;
  
  setInterval(() => {
    $(".color").css("color", CONFIG.colors[counter]);
    
    counter = counter < CONFIG.colors.length ? counter + 1 : 0;
  }, CONFIG.speed);
};

button_selection()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 class="color">Hello world, I love you all.</h1>

user_93269130
Related