JQuery Color: Do Color Animations with jQuery

JQuery color, a jQuery plugin that adds the ability to do color animations to jQuery. Demo effect:

Sample code:

<style>
    div {
        position: absolute;
        background-color: #fff;
        width: 90px;
        height: 90px;
        border: solid 1px #000;
    }

    #testElement1 {
        left: 50px;
    }

    #testElement2 {
        left: 200px;
    }
</style>

<div id="testElement1">
</div>

<div id="testElement2">
</div>
<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<script src="~/Scripts/jquery.color-2.1.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#testElement1").animate({ backgroundColor: "#abcdef" }, 800)
                .animate({ backgroundColor: "#fff" }, 800)
                .animate({ backgroundColor: "#abcdef" }, 800)
                .animate({ backgroundColor: "#fff" }, 800);

            $("#testElement2").animate({ backgroundColor: "#969696" }, 800)
                .animate({ backgroundColor: "#fff" }, 800)
                .animate({ backgroundColor: "#969696" }, 800)
                .animate({ backgroundColor: "#fff" }, 800);
        });
    </script>

You can also fork the github: https://github.com/jquery/jquery-color.

时间: 2024-10-21 04:11:45

JQuery Color: Do Color Animations with jQuery的相关文章

二.jQuery源码解析之构建jQuery之构建函数jQuery的7种用法

一:$(selectorStr[,限制范围]),接受一个选择器(符合jQuery规范的字符串),返回一个jQuery对象;二:$(htmlStr[,文档对象]),$(html[,json对象])传入html字符串,创建一个新的dom元素 三:$(dom元素),$(dom元素集合)将dom元素转换成jQuery对象.四:$(自定义对象)封装普通对象为jQuery对象.五:$(回调函数)绑定ready事件监听函数,当Dom加载完成时执行.六:$(jQuery对象)接受一个jQuery对象,返回一个j

【如何使用jQuery】【jQuery弹出框】【jQuery对div进行操作】

1.如何使用jQuery jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画设计和Ajax交互. 使用jQuery前必须下载并引用jQuery的js文件,下载链接为h

jQuery基础之(五)jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;的冲突

1.自定义添加$ 从上面四篇文章我们看到jQuery的强大,但无论如何,jQuery都不可能满足所有用户的需求,而且有一些需求十分小众,也不适合放到整个jQuery框架中,正是因为这一点,jQuery提供了用户自定义添加“$”的方法. 代码如下: $.fn.disable = function() { return this.each(function() { if (typeof this.disabled != "undefined") this.disable = true; }

jQuery Mobile仿360首页,jQuery Mobile网格布局,jQuery Mobile网址大全,HTML5仿360首页

随着移动互联网的兴起,越来越多的人使用手机上网.打开uc浏览器.我们能够看到uc的主页.或者360的主页.或者百度的主页. 这些页面都是html5做的.看起来非常难.事实上一点也不难.网上有非常多介绍html5的文章,我这里就不解释了.对于程序猿来说.看代码还是最实在的. 代码支持电脑和手机,pad等终端设备. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <h

jQuery入门(2)使用jQuery操作元素的属性与样式

jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 一.区分DOM属性和元素属性 对于下面这样一个标签元素: <img id='img' src="images/image.1.jpg" alt='1' class="imgs"></img> 我们通常将id.src.alt.class称为属性,也即元素属性.但是,当浏览器对标签元素进行解析时,会将元素解析为Dom对象,相应的,元素属性

jQuery表单验证插件----利用jquery.metadata.js将校验规则写到控件中

一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二. 添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面. 三.需要改写触发校验的方式. $("#commentForm").validate({meta: "validate"}); 四.详细代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit

jQuery基础 (一)——样式篇(jQuery选择器)

一.选择器类型 id选择器 class选择器 元素选择器 层级选择器 全选择器(*选择器) 二.有几种方式可以隐藏一个元素: CSS display的值是none. type="hidden"的表单元素. 宽度和高度都显式设置为0. 一个祖先元素是隐藏的,该元素是不会在页面上显示 CSS visibility的值是hidden CSS opacity的指是0 三.属性筛选选择器 四.子元素选择器 四.表单元素选择器 五.特殊选择器this  注意要点: this:表示当前的上下文对象是

与jQuery的感情碰撞——由浅入深学jQuery

原来的时候自己看过jQuery,但是对于什么是jQuery,除了知道jQuery是一种javascript类库外,除了会用几个网页特效外,其他的我这真的是不知道啊.眼看自己就要找工作了,所以自己需要好好学习一下,系统的了解一下.学习了一天,下面把我学习到的精华写给大家,如果有什么错误,希望大家给予指正. 我们学习jQuery之前,必须好好的学习javascript,如果不会javascript的话,jQuery还是不会学的很好的. 一.下面先了解什么是javascript.javascript需

简单入门JavaScript库jQuery:用选择符创建jQuery对象并应用方法

jQuery,顾名思义,也就是JavaScript和查询(Query),是一个辅助JavaScript开发的库. jQuery 能极大地简化 JavaScript 编程. 目录1 jQuery库包含的特性2 jQuery与JS3 获取页面元素4 DOM事件与jQuery方法5 简易操作DOM元素6 处理尺寸7 遍历操作8 过滤操作9 jQuery对JS的增强10 为页面添加动态效果11 jQuery与Ajax12 jQuery工具 通过jQuery,您可以选取(查询,query) HTML元素,