jquery实现随机颜色_jQuery随机链接颜色动画

叁歲伎倆 2023-02-22 01:24 1阅读 0赞

jquery实现随机颜色

We all know that we can set a link's :hover color, but what if we want to add a bit more dynamism and flair? jQuery allows you to not only animate to a specified color, but also allows you to animate to a random color.

大家都知道我们可以设置链接的：hover颜色，但是如果我们想增加一点动感和个性呢？ jQuery不仅允许您将动画设置为指定的颜色，还允许您将动画设置为随机的颜色。

[View Demo][] [观看演示][View Demo]

## jQuery JavaScript **(**The jQuery JavaScript**)** ##

$(document).ready(function() {
    	var randomLinks = $('a.random-color');
    	var original = randomLinks.css('color');
    	randomLinks.hover(function() { //mouseover
    		var col = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
    		$(this).animate({
    			'color': col,
    			'paddingLeft': '20px'
    		},1000);
    	},function() { //mouseout
    		$(this).animate({
    			'color': original,
    			'paddingLeft': '0'
    		},500);
    	});
    });

[View Demo][] [观看演示][View Demo]

For the color animation portion, you'll need an extra [Color Animations][] jQuery plugin. The [padding nudge][] is another neat effect. This effect isn't for everyone, but it can add another subtle effect to your jQuery-enabled website.

对于彩色动画部分，您将需要一个额外的[Color Animations][] jQuery插件。 [填充微调][padding nudge]是另一个很好的效果。 这种效果并不适合所有人，但可以为启用jQuery的网站添加另一种微妙的效果。

> 翻译自: [https://davidwalsh.name/jquery-random-color-animate][https_davidwalsh.name_jquery-random-color-animate]

jquery实现随机颜色

[View Demo]: https://davidwalsh.name/demo/jquery-random-colors.php
[Color Animations]: http://plugins.jquery.com/project/color
[padding nudge]: https://davidwalsh.name/jquery-link-nudging
[https_davidwalsh.name_jquery-random-color-animate]: https://davidwalsh.name/jquery-random-color-animate