jquery闪烁效果及颜色动画插件

jquery方法中有一组淡入淡出的方法,fadeIn和fadeOut,组合起来使用就可以实现一组淡入淡出的jquery闪烁效果。代码:

$("div.block").fadeOut(100).fadeIn(100);

这样可以实现单词的闪烁效果,如果需要连续闪烁,则可以借助setInterval或setTimeout方法来循环实现闪烁。

setInterval版

//每200毫秒循环执行一次
setInterval(function(){
	$("p").fadeOut(100).fadeIn(100);
},200);

setTimeout版

(function(){
	$("p").fadeOut(100).fadeIn(100);
	setTimeout(arguments.callee,200);
})();

以上代码可以实现块状元素或者文字内容的jquery闪烁效果,但有时候我们需要实现背景颜色的闪烁,jquery有一个animate动画方法,但所有用于动画的属性必须是数字,像color,background-color,border-left-color等颜色值则无法实现动画效果。
而jQuery ui中Effects的animation分明是可以实现颜色的动画渐变。(见:http://jqueryui.com/demos/animate/)所以用户可以选择安装jquery ui或者只安装jquery ui Effects Core库来实现颜色的动画效果。

除了这些,已经有牛人将jquery ui Effects Core中关于颜色动画抽取成了单独的jquery插件供用户使用,详情可见http://www.css88.com/archives/4090

调用方法和上面的jquery闪烁效果类似

$("div.block").animate({ backgroundColor: "#68BFEF" }, 500)
	.animate({ backgroundColor: "black" }, 1000);

这里贴出插件的下载地址:
jquery.colorAnimations.js

马上分享给你的朋友吧~

jquery闪烁效果及颜色动画插件》上有 2 条评论

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>