"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. 在高版本SDK中打开现存低版本SDK工程

    直接打开低版本SDK工程会出现错误提示:“Unable to resolve target 'android-xx” 解决方法: 1.将project.properties文件中的“target=an ...

  2. Notes(一)

    Numerous experimental measurements in spatially complex systems have revealed anomalous diffusion in ...

  3. Android 常用的快捷键（随时更新）

    android studio 是google出的一款好用不贵的ide,好像是powerd by idea的那个公司,反正风格上差不多.下面是android studio常用的快捷键设置,记录一下自己用 ...

  4. 【转】使用junit进行单元测试（初级篇）

    转自:http://blog.csdn.net/andycpp/article/details/1327147 我们在编写大型程序的时候,需要写成千上万个方法或函数,这些函数的功能可能很强大,但我们在 ...

  5. Samba Linux和Windows互访

    之前一直用的sshfs manager,但是会出现造成电脑黑屏的情况.网上也没找到其它类似的软件. 后面打算用Samba 直接搜到一篇很强大的文章. 1.  下载及安装Samba 推荐用yum来安装, ...

  6. 【问题汇总】ListView的FooterView设置可见性的问题

    ListView的FooterView一般用来给用户展示一些提示信息. 正常情况下,是这么使用的.代码例如以下: // footer footerLayout = new PullLoadingLay ...

  7. PHP内核探索之变量 图解

    http://blog.csdn.net/ohmygirl/article/details/41542445 http://www.laruence.com/2008/09/19/520.html

  8. js 数组排序要注意的问题，返回的值最好为 -1, 0, 1之间的值

    var test10Elements = [7, 6, 5, 4, 3, 2, 1, 0, 8, 9]; var comparefn = function (x, y) { return x - y; ...

  9. V9最新手机门户域名绑定教程。

    如需要绑定域名为wap.domain.com,作下如操作: 一.把wap.domain.com域名绑定到你的这个网站主机上.二.在网站后台模块>手机门户域名里面填写“http://wap.dom ...

  10. Android打包程序

    右击项目->导出export next,完成相关信息填写将得到.apk文件,即可部署到手机上. 第一次: 然后打开目录就可以看到生成的apk,可以发布到各大市场上.