1、设计源代码

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>加入效果</title>

<link rel="stylesheet" href="../js/jquery-ui-1.10.4/development-bundle/themes/base/jquery.ui.all.css">

<script src="../js/jquery-ui-1.10.4/development-bundle/jquery-1.10.2.js"></script>

<script src="../../js/jquery-ui-1.10.4/development-bundle/ui/jquery.ui.effect.js"></script>

<link rel="stylesheet" href="../js/jquery-ui-1.10.4/development-bundle/demos/demos.css">

<style>

   .effect{

      width: 500px;

      height: 300px;

      position: relative;

   }

   .effect-content{

      width: 200px;

      height: 100px;

      font-size: 40px;

      border: 1px solid #FF0000;

      color: #00FF00;

      padding: 10px;

   }

   .divClass{

      text-indent: 10px;

      letter-spacing: 20px;

      width: 300px;

      height: 200px;

      padding: 10px;

      font-size: 50px;

      font-weight: bolder;

   }

   #btn{

      width: 200px;

      height: 100px;

      font-size: 30px;

      cursor: pointer;

   }

</style>

<script>

   $(function(){

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

		   $(".effect-content").addClass("divClass",2000,callFunc);

		   return false;

	   });

	   var callFunc = function(){

		   setTimeout(function(){

			   $(".effect").removeClass("divClass");

		   },2000);

	   }

   });

</script>

</head>

<body>

   <div class="effect">

        <div class="effect-content ui-corner-all" >

             	上下左右

        </div>

   </div>

   <button id="btn" class="ui-state-default ui-corner-all">效果</button>

</body>

</html>

2、实现结果

（1）初始化

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

（2）点击按钮后

jQuery UI加入效果的更多相关文章

  1. JQuery UI datepicker 使用方法(转)

    官方地址:http://docs.jquery.com/UI/Datepicker,官方示例: http://jqueryui.com/demos/datepicker/. 一个不错的地址,用来DIY ...

  2. 页面日期选择控件--jquery ui datepicker 插件

    日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加相关按钮以及其它导航等.官方地址:http://docs.jquery.com ...

  3. 创建一个jQuery UI的垂直进度条效果

    日期:2013-9-24  来源:GBin1.com 在线演示 缺省的jQuery UI只有水平的进度条效果,没有垂直的进度条效果,仅仅重新定义JQuery UI的CSS不能解决这个问题. 这里我们扩 ...

  4. 弹窗中使用jquery ui的autocomplete自动完成插件无效果 实际是被遮挡了

    在普通页面上使用jquery ui的autocomplete自动完成插件时正常显示提供选择的下拉框,但是放到弹窗中的时候就无法显示这个选择的下拉框,其它效果正常: 估计是被弹出窗遮挡了,网络搜索了jq ...

  5. jQuery UI -- Repeater & 手风琴(Accordion)效果

    jQuery UI -- Repeater & 手风琴(Accordion)效果 很简单的范例,完全不用写程序 直接套用就能做! 但是,基础不稳的人,连「复制贴上」直接套用, 对您而言,都困难 ...

  6. jquery ui autocomplete 实现点击文本框，出现所有查询信息效果,与bootstrap结合使用修改样式

    直接看代码 <!doctype html> <html lang="en"> <head> <meta charset="utf ...

  7. jquery ui 与 easy ui同时引入 展示效果冲突的问题

    jquery ui 由于在定位控件的时候跟easy UI 控件名相同,同时引入会导致冲突 如果需要两个都存在,可以去jquery ui下载定制版ui 脚本文件

  8. jquery ui 怎么实现tab标签切换效果

    1.效果图 2.HTML 代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> &l ...

  9. 【转】推荐10款最热门jQuery UI框架

    推荐10款最热门jQuery UI框架 原创 在进行Web开发时,并非所有的库都适合你的项目,但你仍需要收藏一些Web UI设计相关的库或框架,以在你需要的时候,加快你的开发效率.本文为你推荐10款非 ...

随机推荐

  1. Linux下mysql命令 导入 导出sql文件

    导出数据库 直接使用命令: mysqldump -u root -p abc >abc.sql 然后回车输入密码就可以了: mysqldump -u 数据库链接用户名 -p  目标数据库 > ...

  2. Git-ssh登录github

    生成你的ssh-key $ ssh-keygen -t rsa -b 4096 -C  "SaphhireCastle@163.com" 默认目录为:/Users/you/id_r ...

  3. Spring JdbcTemplate框架搭建及其增删改查使用指南

    Spring JdbcTemplate框架搭建及其增删改查使用指南 前言: 本文指在介绍spring框架中的JdbcTemplate类的使用方法,涉及基本的Spring反转控制的使用方法和JDBC的基 ...

  4. [ python ] 使用sys模块实现进度条

    在写网络IO传输的时候, 有时候需要进度条来显示当前传输进度,使用 sys 模块就可以实现: sys.stdout.write() 这个函数在在控制台输出字符串不会带任何结尾,这就意味着这个输出还没有 ...

  5. 【cocos2d-js官方文档】二十一、v3相对于v2版本的api变动

    分类: cocos2d-js(28) 目录(?)[+] CCAudio.js SimpleAudioEngine.js改名为CCAudio.js. AudioEngine中删除了以下几个方法: pre ...

  6. Codeforces 538 A. Cutting Banner-substr()函数字符串拼接

      A. Cutting Banner   time limit per test 2 seconds memory limit per test 256 megabytes input standa ...

  7. mysql实现full outer join

    由于MySQL设计时不支持full outer join, 所以如果有全连接需求时,需要一点小技巧来实现. 假设有两个表t1,t2 full outer join 的效果和下面的效果一样: SELEC ...

  8. Mysql数据库的安装及配置

    本文转载自http://www.cnblogs.com/xiaoluo501395377/archive/2013/04/07/3003278.html 如果要在Linux上做j2ee开发,首先得搭建 ...

  9. 利用Java的反射与代理机制实现AOP

    在上一篇文章中,我们讲述了利用Java的反射机制中实现Spring中的IOC,在本文中,我们将更进一步,讲述用Java的反射和动态代理机制来实现Spring的AOP. 一．AOP概述 AOP(Aspe ...

  10. [BZOJ 1177] Oil

    Link:https://www.lydsy.com/JudgeOnline/problem.php?id=1177 Solution: 相当于将大矩形分为3块,取每块中最大的正方形 对于此类分成几块 ...