HTML笔记 ·

jQueryUI的effect方法介绍

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文件下载,点击下面的下载即可,如果代码中有不清楚的可以留言。

 

参与评论