Py学习  »  Jquery

带循环的jQuery字体颜色动画

Anna_B • 3 年前 • 736 次点击  

我需要一个没有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>

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

谢谢。

Python社区是高质量的Python/Django开发社区
本文地址:http://www.python88.com/topic/57177
 
736 次点击  
文章 [ 5 ]  |  最新文章 3 年前
Sohail
Reply   •   1 楼
Sohail    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>
Adrian Solarczyk
Reply   •   2 楼
Adrian Solarczyk    3 年前

我会同意的

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>
Alejandro Lariccia
Reply   •   3 楼
Alejandro Lariccia    3 年前

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>
dale landry
Reply   •   4 楼
dale landry    3 年前

$.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>
Finesse
Reply   •   5 楼
Finesse    3 年前

你不需要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>