"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. NGUI学习笔记（三）：屏幕自适应

    我们开发移动端游戏的时候,一般都会选择Constrained/FixedSize的缩放模式来保证图片在不同的分辨率下相对于屏幕的尺寸保持一致,但是对于屏幕自适应来说,这还是不够的,不同的手机存在不同的 ...

  2. ssh免密码登录记录

    做mha.hadoop安装过程中都要用ssh免密码登陆,查过一些资料,踩过很多坑,下面用简单记录一下 首先要安装ssh linux : centOS 6.5 yum -y install *ssh* ...

  3. Flex 自动获取焦点 监听全局键盘事件

    在mxml里监听addedToStage事件 protected function application1_addedToStageHandler(event:Event):void { this. ...

  4. hdu 5437 Alisha’s Party 优先队列

    Alisha’s Party Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/contests/contest_sh ...

  5. Web API接口 安全验证

    在上篇随笔<Web API应用架构设计分析(1)>,我对Web API的各种应用架构进行了概括性的分析和设计,Web API 是一种应用接口框架,它能够构建HTTP服务以支撑更广泛的客户端 ...

  6. iOS利用视频做起始页

    一个好的引导页会使得用户体验大大提升,利用视频来做,可以更简单的达到优雅的效果.使用MediaPlayer.framework框架下的AVPlayerLayer,它和Core Animation紧密地 ...

  7. C/C++开发工具大比拼【转】

    C/C++开发工具大比拼[转]  (http://hi.baidu.com/vipdowndown/blog/item/dcd7c1b5ad3209ef30add167.html) * NetBean ...

  8. C_数据结构_链表的链式实现

    传统的链表不能实现数据和链表的分离,一旦数据改变则链表就不能用了,就要重新开发. 如上说示:外层是Teacher,里面小的是node. #ifndef _MYLINKLIST_H_ #define _ ...

  9. Google stuff

    Google Pro Tip: Use Back-of-the-envelope-calculations to Choose the Best Design - High Scalability - ...

  10. JSP的三种类型的元素

    JSP有三种类型的元素:指令元素(directive element).行为元素(action element).和脚本元素(script element). 指令元素用于指定整个JSP页面的相关信息 ...