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. Oracle基础 11 约束 constraints

    --主.外键约束 create table t(  id int primary key); create table t1(  id int references t(id)); 或者create ...

  2. H5智能表单

    表单 keygen元素的作用是提供一种验证用户的可靠方法 datalist 元素规定输入域的选项列表 output元素用于不同类型的输出,比如计算或脚本输出 智能表单 input 新增type值 em ...

  3. Linux编写Shell脚本

    ——<Linux就该这么学>笔记Shell脚本命令的工作方式有两种 交互式: 用户每输入一条命令就立即执行 批处理: 由用户事先编写好一个完整的Shell脚本,Shell会一次性执行脚本中 ...

  4. GUI界面------tkinter

    import tkinter as tk class APP: def __init__(self,master): frame = tk.Frame(master) frame.pack(side ...

  5. Java上传文件格式判断

    判断用户上传文件的合法性仅仅通过后缀名是完全不够的,谁也不知道后缀名是否被更改,服务器保存一个不知道真实类型的文件有极大的风险. 因此需要后台进行进一步的文件类型校验,这里有两种情况: 1)一般的文件 ...

  6. mysql错误Table ‘./mysql/proc’ is marked as crashed and should be repaired

    今天服务器当机了,重启后就发现了如下错误: Table ‘./mysql/proc’ is marked as crashed and should be repaired 解决方法: repair ...

  7. Laravel项目使用腾讯云对象存储上传图片（cos-php-sdk-v5版本）

    为了加快网站访问速度.降低网站负载,现在越来越多的网站选择把图片等静态文件放在云上,这里介绍一下腾讯云对象存储在Laravel项目中的使用 1.申请腾讯云对象存储.创建Bucket.获取APPID等参 ...

  8. <div>之定位

    在使用盒子模型的过程中,如何放置各种类型的“盒子”,就存在定位.浮动等问题.下面就日常运用过程中出现过的情况总结如下(陆续加入中....) 一.图片直接做<div>的背景 在<div ...

  9. 洛谷——P2958 [USACO09OCT]木瓜的丛林Papaya Jungle

    P2958 [USACO09OCT]木瓜的丛林Papaya Jungle 题目描述 Bessie has wandered off the farm into the adjoining farmer ...

  10. 16、Flask实战第16天：Flask文件上传

    上传文件 这里以图片来演示flask如何上传文件 首先来写个简单的前端页面upload.html, 在里面写个文件上传的表单 后端debug断点调试 获取到文件后,当然,我们需要把文件保存下来.在项目 ...