"jquery-ui-effect-color.js" 是从jqueryui下载的color动画部分(自己改了个名字). 链接
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>color animate 02.</title>

    <link rel="stylesheet" href="../libs/jquery-easyui-1.4.2/themes/default/easyui.css">

    <script type="text/javascript" src="../libs/jquery/1.11.1/jquery.js"></script>

    <script type="text/javascript" src="../libs/jqueryui/1.11.4/jquery-ui-effect-color.js"></script>

    <script type="text/javascript" src="../libs/jquery-easyui-1.4.2/jquery.easyui.min.js"></script>

    <style>

        #div1 {

            background-color: blue;

            color: #ffffff;

            width: 500px;

        }

        .dg-blink-border-1 {

            border: 3px solid red;

        }

        .dg-blink-border-2 {

            border: 3px solid yellow;

        }

    </style>

    <script>

        function myblink(){this.sec=0;}

        myblink.prototype = {

            delay: function(func, time){

                this.sec += time;

                setTimeout(func, this.sec);

                return this;

            },

            toggle: function(fa,fb,s,num){

                for(var i=0;i<num;i++){

                    this.delay(fa,s).delay(fb,s);

                }

                return this;

            },

            log: function(){}

        }

        $(function(){

            var state = true, state2 = true;

            $('#btn').click(function(){

                if(state){

                    $('#div1').animate({

                        backgroundColor: 'yellow',

                        color: '#000000',

                        width: 240

                    },1000);

                }else{

                    $('#div1').animate({

                        backgroundColor: 'blue',

                        color: '#ffffff',

                        width: 500

                    },1000);

                }

                state = !state;

            });

            $('#btn2').click(function(){

                var tar = $('#dg').parents('div[class*="panel datagrid"]');

                var a = function(){

                    tar.removeClass('dg-blink-border-2');

                    tar.addClass('dg-blink-border-1');

                };

                var b = function(){

                    tar.removeClass('dg-blink-border-1');

                    tar.addClass('dg-blink-border-2');

                };

                var c = function(){

                    tar.removeClass('dg-blink-border-1');

                    tar.removeClass('dg-blink-border-2');

                };

                new myblink().toggle(a,b,300,7).delay(c,100);

            });

            $('body').append('<br/>');

            $('body').append('<br/>');

            $('body').append('<div id="{1}"></div>'.replace('{1}','dg'));

            $('#dg').datagrid({

                title:'表格',

                width: 600,

                height: 200,

                singleSelect: true,

                columns:[[

                    {field:'code',title:'Code',width:'33%'},

                    {field:'name',title:'Name',width:'30%'},

                    {field:'price',title:'Price',width:'33%',align:'right'}

                ]]

            });

            var dgdata = [];

            for(var i=0;i<8;i++){

                var row = {};

                row['code']='code00'+(i+1);

                row['name']='name00'+(i+1);

                row['price']='1000'*(i+1);

                dgdata.push(row);

            }

            $('#dg').datagrid('loadData',dgdata);

        });

    </script>

</head>

<body>

    <div id="div1">

        你好,欢迎光临!请随意!窗前明月光,疑是地上霜.举头望明月,低头思故乡.日照香炉生紫烟,遥看瀑布挂前川.飞流直下三千尺,疑是银河落九天.

    </div>

    <br>

    <input type="button" id="btn" value="点击"/>   

    <input type="button" id="btn2" value="点击"/>

</body>

</html>

　　

jquery的effect-color对easyui没效果.自己冒险写个边框的颜色闪烁.的更多相关文章

  1. jquery mobile 实现自定义confirm确认框效果

    类似删除的效果,在执行之前,一般需要添加确认对话框,点确认的话执行,取消按钮就不执行,传统的js if(confirm('确定删除吗?')) { //执行代码 } 这种效果比较丑,使用jquery m ...

  2. jquery制作弹出层带遮罩效果，点击阴影部分层消失

    jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...

  3. jQuery点击图片放大拖动查看效果

    效果如图: 放大前: 放大后(可拖动图片浏览): 源码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head& ...

  4. jQuery精仿手机上的翻牌效果菜单

    代码简介: jQuery精仿手机上的翻牌效果菜单,很平滑的动画翻牌效果,每点击一下菜单,就会翻去一下,貌似很灵敏的动作.注意:如果预览时没看到效果,请刷新一下页面,让jquery载入就行了,在实际使用 ...

  5. [JQuery]用InsertAfter实现图片走马灯展示效果2——js代码重构

    写在前面 前面写过一篇文章<[JQuery]用InsertAfter实现图片走马灯展示效果>,自从写过那样的也算是使用面向对象的写法吧,代码实在丑陋,自从写过那样的代码,就是自己的一块心病 ...

  6. 3-5 编程练习：jQuery实现简单的图片对应展示效果

    3-5 编程练习:jQuery实现简单的图片对应展示效果 通过这个章节的学习, 老师带领大家完成了一个基本的图片切换特效,接下来,我们也实现一个类似的效果,点击相应的按钮,切换对应的图片. 效果图 : ...

  7. jQuery鼠标滑过横向时间轴效果

    jQuery鼠标滑过横向时间轴效果---效果图: jQuery鼠标滑过横向时间轴效果---全部代码: <!DOCTYPE html> <html> <head> & ...

  8. 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开，在页面的列表中有若干项，列表的每项中有一个二级列表，二级列表默认为隐藏状态。点击列表的项，切换二级列表的显示或隐藏状态

    查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...

  9. jQuery Wheel 环形菜单插件5种效果演示

    很酷的菜单-jQuery Wheel 环形菜单插件5种效果演示在线预览 下载地址 实例代码 <div class="container"> <!-- Top Na ...

随机推荐

  1. Oracle- PL/SQL DEV的远程配置

    首先装好Oracle企业版或者客户端精简版.之后要修改你的的tnsnames.ora文件,来增加数据库. 我的ORACLE实例是ORACLE1,放在D:\oracle\ 目录下.我的IP地址是 192 ...

  2. web pack的使用事项

    一开始把webpack想的很难,很复杂,哈哈. 其实写的好的东西真的是越简单,越简单的东西其实越难写. 按照How to一步一步基本就能理解,webpack怎么使用了, 后面就是如何帮程序一步一步找到 ...

  3. Spring 3 MVC and JSON example

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  4. eclipse中web项目部署以后jsp的java文件找不到问题(Tomcat配置serverlocations)

    我的开发环境:eclipse kepler (4.3)+tomcat7.0.42. 在我想看eclipse中web项目jsp文件被tomcat转换成java以后的java源文件的位置,发现正常情况下的 ...

  5. Linux下批量改动名字方法

    如果任务是把文件夹下全部的.log后缀文件名称中的2014去掉. 方法一) 脚本 这样的方法通过ls把当前文件夹下全部的文件进行遍历,然后获取文件名称,进行mv操作.例如以下: #!/bin/sh f ...

  6. S5PV210（TQ210）裸机编程

    本文很多其它的是教会大家怎样学习. 4.1    汇编学习 4.1.1 基础知识     4.1.2 ARM模拟器 4.2    S5PV210启动流程 4.3    点亮一个LED 4.4    串 ...

  7. MySQL架构优化实战系列2：主从复制同步与查询性能调优

  8. [Effective C++ --027]尽量少做转型动作

    引言                                                                                                   ...

  9. 文件I/O之sync、fsync和fdatasync函数

    传统的UNIX实现在内核中设有缓冲区高速缓存或页面高速缓存,大多数磁盘I/O都通过缓冲进行.当将数据写入文件时,内核通常先将数据复制到其中一个缓冲区中,如果 该缓冲区尚未写满,则并不将其排入输出队列, ...

  10. 用java开发的网站或者程序

    中国移动的官网即其相关业务系统 阿里巴巴.淘宝网 58同城是java做的后台 铁道部12306 腾讯的拍拍网等 各大银行的交互应用系统,比如有的信用卡网银 另外,Android手机的大部分应用,其他智 ...