"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. 【Stage3D学习笔记续】山寨Starling（七）：一般优化方法简介及混合模式

    关于事件的优化: 遍历注册的事件由foreach改变为fori,在大量数据遍历时会有提升: 事件池优化: 所有的事件都使用一个对象池进行保存,而不是使用到时进行创建,使用EventDispatcher ...

  2. 在Win8 Mertro 中使用SQLite

    在Win8 Mertro 中使用SQLite 分类:             .net 开发              2012-09-19 18:17     1229人阅读     评论(3)   ...

  3. Android设计模式系列--模板方法模式

    模板方法,和单例模式是我认为GOF的23中最简单的两种模式.但是我个人对模板方法的经典思想特别推崇,虽然模板方法在大对数情况下并不被推荐使用,但是这种通过父类调用子类的方法,使用继承来改变算法的一部分 ...

  4. cocos2d-x 纹理研究

    转自:http://blog.csdn.net/qq51931373/article/details/9119161 1.通常情况下用PVR格式的文件来进行图片显示的时候,在运行速度和内存消耗方面都要 ...

  5. 删除浏览器浏览器删除cookie方法

    上班之余抽点时光出来写写博文,希望对新接触的朋友有帮助.今天在这里和大家一起学习一下删除浏览器 文章目录导航 适用范围及演示工具 什么是cookie? cookie有什么作用? ie6/ie7/ie8 ...

  6. Oracle12c功能增强 新特性之管理功能的增强

    1.    数据文件在线重命名和迁移 不想先前的版本号.在Oracle12cR1中,数据文件的迁移或重命名不再要求一系列的步骤,比如:将表空间至于仅仅读模式,然后数据文件逻辑等操作.在12cR1中.数 ...

  7. 根据Android架构分层推荐开发书籍

    Android系统的架构可以分为六个部分.笔者根据自己的体会为大家推荐每个部分对应的精品书籍,不喜勿喷.  1.Android Application <Android Developer Do ...

  8. iOS开发——UI篇OC&transform详解

    transframe属性详解 1. transform属性 在OC中,通过transform属性可以修改对象的平移.缩放比例和旋转角度 常用的创建transform结构体方法分两大类 (1) 创建“基 ...

  9. procps工具集 ----Linux中的可用内存指的是什么？

    https://gitlab.com/procps-ng/procps free - Report the amount of free and used memory in the system k ...

  10. 使用webView制作浏览器

    xml文件: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:t ...