开发者

Jquery, Background color transition loop

开发者 https://www.devze.com 2023-01-14 14:20 出处:网络
I am looking to animate the background-color so it cycles through varios predefined colors in an endless loop.

I am looking to animate the background-color so it cycles through varios predefined colors in an endless loop.

I am not a programmer and new to jquery, if someone could help me figure this out I would really appre开发者_如何学运维ciate ist

thx!


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.


window.setInterval('functionToChangeColour()', 5000); This will run your function every 5000 milliseconds changing the colour the way you'd like it to change.

You can assign an object var obj = setInterval('functionToChangeColour()', 5000); to then later clear the interval if you like using window.clearInterval(obj)

0

精彩评论

暂无评论...
验证码 换一张
取 消