jQueryUI的effect方法介绍
2015-04-08 14:05:34
jQuery UI动画方法是jQuery方法的扩展，其方法的参数比jQuery方法更多，并且提供的动画效果比jQuery方法更多，下面我先来给大家介绍一下jQueryUI的effect方法。
在使用jQueryUI之前需要引入js文件，我们经常使用的是jquery-ui.js，同时还需要引入jQuery文件jquery-ui.js，引入方法为：
<script src="jquery-1.9.0.js"></script>
<script src="jquery-ui.js"></script>先来介绍一个通过鼠标单击实现元素抖动效果的实现方法：
<html lang="en">
<head>
<meta charset="utf-8">
<title>effect demo</title>
<link rel="stylesheet" href="jquery-ui.css">
<style>
div {
width: 100px;
height: 100px;
background: #ccc;
border: 1px solid #000;
}
</style>
<script src="jquery-1.9.0.js"></script>
<script src="jquery-ui.js"></script>
</head>
<body>
<p>Click anywhere to apply the effect.</p>
<div>
</div>
<script>
$( document ).click(function() {
$( "div" ).effect( "bounce", "slow" );});
</script>
</body>
</html>effect的第一个参数是必须有的，他代表的是抖动的方式，上面的代码是使元素上下抖动，其他的效果种类和代码为：
"blind" //从下至上收起来，直至隐藏
"bounce" //上下晃动元素
"clip" //上下同时收起来，直到元素隐藏
"drop" //向左移动并升高透明度，直到隐藏
"explode" //将元素拆分为九宫，向外扩展并提高透明度，直到隐藏
"fold" //向上收起，再想左收起，直到隐藏
"highlight" //高亮某个元素
"puff" //扩大元素的高度和宽度并提高透明度，直到隐藏
"pulsate" //闪烁元素
"scale" //从右下向左上收起，直到隐藏
"shake" //左右晃动元素
"slide" //从左往右滑动元素，直到完全显示
"transfer" //缩小并迁移元素至触发时间的HTML元素effect的第二个参数为效果的各种参数取值
例如上面的bounce可以设置slow和fast两种，分别表示快和慢，blind可以设置hide和show
effect的第三个参数为设置效果的持续时间。
下面在给大家提供一个例子，这个例子实现目标为：1、将动画效果改为左右晃动元素 2、将晃动速度改为2000毫秒 3、元素晃动结束后弹出对话框，代码如下：
<html lang="en">
<head>
<meta charset="utf-8">
<title>effect demo</title>
<link rel="stylesheet" href="jquery-ui.css">
<style>
div {
width: 100px;
height: 100px;
background: #ccc;
border: 1px solid #000;
}
</style>
<script src="jquery-1.9.0.js"></script>
<script src="jquery-ui.js"></script>
</head>
<body>
<p>Click anywhere to apply the effect.</p>
<div>
</div>
<script>
$( document ).click(function() {
$( "div" ).effect( "shake", "fast" ,hello);}
);
function hello(){
alert("Hello JavaScript!");
};
</script>
</body>
</html>本站提供jQueryUI和jQuery的js文件下载，点击下面的下载即可，如果代码中有不清楚的可以留言。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2015-04-08，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读