带有循环的jQuery字体颜色动画

Question

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.

Answer 1

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>

Answer 2

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>

Answer 3

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>

Answer 4

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>

Answer 5

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>