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. easyui时间控件用js实时获取选定的时间的取法

    easyui时间控件用js实时获取选定的时间的取法var   datetime=$("#id").datetimebox("getValue");不能用 $(& ...

  2. Grunt环境搭建及使用 前端必备

    jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发人员,如果你现在还不知道grunt或者听说过 ...

  3. 区块链开发（四）Nodejs下载&安装

    以太坊框架truffle的安装需要依赖nodejs中的npm命令,本篇博客我们就简单介绍一下node的安装过程.操作系统基于ubuntu 16.04版本. 下载地址 nodejs官网:http://w ...

  4. docker从零开始网络（一）概述

    概述 预计阅读时间: 4分钟 Docker容器和服务如此强大的原因之一是您可以将它们连接在一起,或者将它们连接到非Docker工作负载.Docker容器和服务甚至不需要知道它们部署在Docker上,或 ...

  5. [转载]如何将OFBIZ(opentaps)默认数据库迁移至mysql((2

    原文地址:如何将OFBIZ(opentaps)默认数据库迁移至mysql(利昂原创)作者:利昂 ofbiz自带的数据库是Derby,这是一种小型的适合与测试系统的数据库,但不适合在产品级系统中使用,所 ...

  6. LPD Office插件使用指南

    LPD Office插件已经发布至Azure上,您可以在本机Outlook和Office Online使用该插件 一:在Outlook中使用 LPD Office插件 打开Outlook应用,并点击“ ...

  7. Ubuntu 16.04 win7 双系统时间问题

    在安装了win7的电脑上又装了一个Ubuntu 16.04,这Ubuntu的启动速度慢就选不说了,切加win7之后发现时间也不对啊. 所以记一个随笔记录一下自己修改双系统的日期. 当然,网上也搜过,说 ...

  8. 线段树【CF620E】The Child and Sequence

    Description At the children's day, the child came to Picks's house, and messed his house up. Picks w ...

  9. 1.2(学习笔记) JSP动作元素

    动作元素 jsp:useBean:根据指定类实例化一个对象,类似Preson per = new Preson(); <jsp:useBean id="对象名" class ...

  10. 原始DAO开发

    1,pojo package com.songyan.dao; import com.songyan.pojo.Student; public interface StudentDao { publi ...