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. Java坦克大战 (四) 之子弹的产生

    本文来自:小易博客专栏.转载请注明出处:http://blog.csdn.net/oldinaction 在此小易将坦克大战这个项目分为几个版本,以此对J2SE的知识进行回顾和总结,希望这样也能给刚学 ...

  2. DIV+CSS设置及问题总结

    HTML 中有用的字符实体 注释:实体名称对大小写敏感! 显示结果 描述 实体名称 实体编号   空格     < 小于号 < < > 大于号 > > & ...

  3. hdu 5172(线段树||HASH)

    GTY's gay friends Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others ...

  4. AC日记——[HEOI2012]旅行问题 bzoj 2746

    2746 思路: 建立ac自动机,然后把fail树抽出来: 然后在fail树上走lca(神奇): 代码: #include <cstdio> #include <vector> ...

  5. Vue 不使用Vuex的情况下进行状态管理

    在封装自己的Vue ui库的时候,往往要封装一些比较复杂的组件,比如说table,form之类.这些组件由于功能繁杂,还涉及到子组件嵌套及通信,如果没有一套状态管理方案的话很容易导致代码难以阅读.难以 ...

  6. 洛谷 P1316 丢瓶盖【二分答案】

    题目描述 陶陶是个贪玩的孩子,他在地上丢了A个瓶盖,为了简化问题,我们可以当作这A个瓶盖丢在一条直线上,现在他想从这些瓶盖里找出B个,使得距离最近的2个距离最大,他想知道,最大可以到多少呢? 输入输出 ...

  7. 洛谷——P1754 球迷购票问题

    题目背景 盛况空前的足球赛即将举行.球赛门票售票处排起了球迷购票长龙. 按售票处规定,每位购票者限购一张门票,且每张票售价为50元.在排成长龙的球迷中有N个人手持面值50元的钱币,另有N个人手持面值1 ...

  8. 在Strust2 使用datatimepicker 标签引发的一系列问题

    问题:出现无法识别的问题 原因:Strust2.1开始,对于ajax类的标签不再使用<%@ taglib prefix="s" uri="/struts-tags& ...

  9. luogu P1623 [CEOI2007]树的匹配Treasury

    题目链接 luogu P1623 [CEOI2007]树的匹配Treasury 题解 f[i][0/1]表示当前位置没用/用了 转移暴力就可以了 code // luogu-judger-enable ...

  10. 十. 图形界面(GUI)设计7.文本框和文本区的输入输出

    在GUI中,常用文本框和文本区实现数据的输入和输出.如果采用文本区输入,通常另设一个数据输入完成按钮.当数据输入结束时,点击这个按钮.事件处理程序利用getText()方法从文本区中读取字符串信息.对 ...