jquery文字颜色渐变,jquery背景色渐变,jquery color_色彩特效,颜色特效,网页色彩特效免费下载_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

特效介绍

jquery文字颜色和背景颜色动画

jquery animate 动画，不支持颜色的变化。这里需要引入一个jquery插件“jquery.animate-colors.js”来达到这个效果。运行下面代码查看效果：

<!DOCTYPE html> <html> <head> <title>jquery文字颜色渐变,jquery背景色渐变,jquery color</title> <style> div { background-color: #bada55; width: 400px; height:30px; line-height:30px; font-size:16px; border: 1px solid green; } </style> <script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script> <script src="http://www.5imoban.net/download/jquery/jquery.animate-colors.js"></script> </head> <body> <div id="block">鼠标移上来看看www.5imoban.net</div> <script> $(function(){ $("#block").hover( function(){ $(this).animate({"background-color":"#123456","color":"#fff"},500); }, function(){ $(this).animate({"background-color":"#bada55","color":"#000"},500); } ) }) </script> </body> </html>
提示：您可以先修改部分代码再运行

使用方法

1、引入jquery库和相关jquery：

<script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>
<script src="http://www.5imoban.net/download/jquery/jquery.animate-colors.js"></script>

2、发挥自己的想想，用animate改变自己想要的颜色吧：

<script>
$(function(){
	$("#block").hover(
		function(){
			$(this).animate({"background-color":"#123456","color":"#fff"},500);
		},
		function(){
			$(this).animate({"background-color":"#bada55","color":"#000"},500);
		}
	)
})
</script>

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！

jquery文字颜色渐变,jquery背景色渐变,jquery color

猜你喜欢