当前位置：文江博客话题详情

Jquery，背景颜色过渡循环

发布于 2024-09-16 14:48:27 字数 104 浏览 2 评论 0原文

我希望对背景颜色进行动画处理，以便它在无限循环中循环显示各种预定义颜色。

我不是程序员，而且是 jquery 新手，如果有人能帮助我解决这个问题，我将非常感激

！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

笑饮青盏花 2024-09-23 14:48:27

基于 Byron 的解决方案并使用彩色动画插件：

// The array of colours and current index within the colour array
// This array can be hex values or named colours
var colours = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];
var currIndex = 0;

// The element to animage the background-color of
var elem = $('#element-id');

// Infinitely animate the background-color of your element every second
var loop = setInterval(function(){
    elem.animate({backgroundColor: colours[currIndex++]});

    // Set the current index in the colour array, making sure to loop
    // back to beginning once last colour is reached
    currIndex = currIndex == colours.length ? 0 : currIndex;
}, 1000);

您可以看到它在此处执行。

Building on Byron's solution and making use of the color animations plugin:

// The array of colours and current index within the colour array
// This array can be hex values or named colours
var colours = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];
var currIndex = 0;

// The element to animage the background-color of
var elem = $('#element-id');

// Infinitely animate the background-color of your element every second
var loop = setInterval(function(){
    elem.animate({backgroundColor: colours[currIndex++]});

    // Set the current index in the colour array, making sure to loop
    // back to beginning once last colour is reached
    currIndex = currIndex == colours.length ? 0 : currIndex;
}, 1000);

You can see it in action here.

回复收藏 0 原文