代码之家 › 专栏 › 技术社区 › Anna_B

带循环的jQuery字体颜色动画

jquery javascript

Anna_B · 技术社区 · 4 年前

我需要一个没有CSS3函数的jQuery颜色动画。

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>

在我的浏览器中,它可以工作。但我认为代码并不是很好。怎么可能把颜色写在一行,然后控制速度呢?

谢谢。

5 回复 | 直到 4 年前

Finesse 4 年前

你不需要jQuery。做一个计数器,每增加一个毫秒,并根据计数器状态设置颜色。

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>

dale landry 4 年前

$.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>

Alejandro Lariccia 4 年前

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>

Adrian Solarczyk 4 年前

我会同意的

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>

Sohail Ashraf 4 年前

您可以将所有的颜色存储在一个数组中,然后使用一个增量变量来分配带有索引的颜色。

也可以使用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>