"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. Jsp的三、七、九

    1.jsp的三个编译指令 <%page %> <%taglib %> <%include %> 2.jsp的七个动作指令 forward param include ...

  2. 2016 Mac OS 10.11 CocoaPods的安装问题

    CocoaPods的安装问题: 1.首先用淘宝的Ruby镜像来访问CocoaPods,打开终端输入以下命令: (1)gem sources --remove  https://rubygems.org ...

  3. linux集群时间同步

    说明:由于hadoop集群对时间要求很高,所以集群内主机要经常同步.本文档适合ubuntu.redhat系列. 注:很多内容是在网上摘录,然后试验后总结,如有疑问可留言探讨. 1.设置主机时间准确(任 ...

  4. tomcat 虚拟目录与显示目录中文件列表

    虚拟目录: 该方法推荐使用,比较简单. 在%tomcat%\conf\Catalina\localhost(该目录可能需要手工创建)下新建一个文件abc.xml,注意文件名中的abc就表示虚拟目录的名 ...

  5. [置顶] 【玩转cocos2d-x之七】场景类CCScene和布景类CCLayer

    原创作品,转载请标明:http://blog.csdn.net/jackystudio/article/details/12708811 场景类CCScene和布景类CCLayer都是作为一个容器来使 ...

  6. C#数据操作LINQ

    Linq是language integrated query的缩写,即"语言集成查询"之意. Linq主要包含四个组件,Linq to object.Linq to XML.Lin ...

  7. Azure CLI （一）如何安装和配置Azure CLI

    什么是Azure CLI 快速安装 Azure 命令行界面 (Azure CLI),以便使用一组基于 shell 的开源命令在 Azure 中创建和管理资源. 步骤 1:安装 . 登录https:// ...

  8. Fedora 19修改主机名

    Distribution为Fedora 19 方式一(重启后失效,需root权限): hostname 新主机名 [root@promote hadoop]# hostname promote.cac ...

  9. [引]ASP.NET MVC 4 Content Map

    本文转自:http://msdn.microsoft.com/en-us/library/gg416514(v=vs.108).aspx The Model-View-Controller (MVC) ...

  10. always block內省略else所代表的電路

    真 OO无双 之 真乱舞书 寫程式是很快樂的一件事 Since Sep.15,2006 (筆記) always block內省略else所代表的電路 (SOC) (Verilog) Abstract在 ...