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. Image.FromStream与Image.FromFile使用区别

    将一个图片加载并显示在picturebox上,一般情况下得到预期的结果,然而对于同一个filepath, 若连续两次调用下面的语句系统将会报错(如用户多次选择加载同一张图片使用Image.FromFi ...

  2. Django-ContentType

    背景:学位课.专题课.价格策略(每一种课程(学位课和专题课下可分为不同的种类的课程)在不同学习时间内的价格不同) 例如:如何将课程表与价格策略表关联起来: 用外键是可以将课程表和价格策略表关联起来的, ...

  3. rertful规范

    RESTful API的理解 断言 assert 条件(True)执行下面代码 assert 条件(False) 报错 什么是接口? 1- URL,用于进行系统之间操作数据. 2- 面向对象接口,用于 ...

  4. C#MD5加密和DES加密解密算法

    public partial class stringTest : System.Web.UI.Page     {         protected void Page_Load(object s ...

  5. 最近项目中用到的js

    1.用字典判断数组是否有重复function ticketTypeValidate() { var ticketArr = []; var tickettype = $("div[name= ...

  6. Undefined index: validate（thinkphp）

    今天在用thinkphp3.23时发现错误 NOTIC: [8] Undefined index: validate  此处是thinkphp核心目录\Think\Model.class.php 第 ...

  7. 2017中国大学生程序设计竞赛 - 女生专场C【前后缀GCD】

    C HDU - 6025 [题意]:去除数列中的一个数字,使去除后的数列中所有数字的gcd尽可能大. [分析]: 数组prefixgcd[],对于prefixgcd[i]=g,g为a[0]-a[i]的 ...

  8. 《Machine Learning》（第一章）序章

    关键词:机器学习,基本术语,假设空间,归纳偏好,机器学习用途 一.机器学习概述 机器学习是一门从数据中,经过计算得到模型(Model)的一种过程,得到的模型不仅能反应出训练数据集中所蕴含的规律,并且能 ...

  9. Android学习--跨程序共享数据之内容提供其探究

    什么是内容提供器? 跨程序共享数据之内容提供器,这是个什么功能?看到这个名称的时候最能给我们提供信息的应该是“跨程序”这个词了,是的重点就是这个词,这个内容提供器的作用主要是用于在不同的引用程序之间实 ...

  10. 14、Flask实战第14天：Flask使用SQLAlchemy

    flask-sqlalchemy使用详解 之前我们用到的SQLAchemy是可以单独使用的,不需要用到Flask 如果我们在Flask框架中使用SQLAchemy,可以使用flask_sqlalche ...