jQuery цветная анимация шрифта с циклом

Question

Мне нужна цветная анимация jQuery без функций CSS3.

Я кодировал это:

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>

В моем браузере это работает. Но я думаю, что код не очень «хороший». Как можно было бы написать цвета в одну строку, а затем просто контролировать скорость?

Спасибо.

Answer 1

может быть, это работает для вас:

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>

Answer 2

Создайте массив и присвойте парам ключ / значение значения, которые вы хотите перебрать. Затем используйте $.each() для перебора этого массива в вашей функции.

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 3

Вы можете сохранить все цвета в массиве, а затем использовать инкрементную переменную для назначения цветов с индексом.

А также вы можете использовать setInterval вместо 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 4

Вам не нужно jQuery. Сделайте счетчик, увеличивайте его каждые n миллисекунд и устанавливайте цвет в зависимости от состояния счетчика.

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 5

Я бы go с этим

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>