Easing插件大家也许一直在用，非常的不错，能实现很多你想要的效果，并且jquery的很多内置方法也开始支持Easing参数了，经常使用jquery的朋友一定会知道，这里不再多讲，今天主要谈的是Easing的实用方法，至于动画方面在WEB开发笔记中的有一篇文章中已经提到过，大家可以结合着使用一下。

如果使用Easing 分以下几步走：

第一步：

去http://gsgd.co.uk/sandbox/jquery/easing/下载最新版的Easing 插件。

第二步：

页面加载Jquery与easing

<script src=”js/jquery-1.8.0.min.js”></script>
<script src=”js/jquery.easing.1.3.js”></script>

第三步：

我经常使用的方法有两种大类，一类是用toggle()、slideUp()、slideDown()、show()、hide()等jQuery内置的动画效果来实现，演示代码如下：

1
2
3

$("#t1").slideUp({
duration: 1000, 
easing: "easeOutBounce"});

另一种方法就是配合animate，演示代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

/*$("#t1").hover(function(){
		$(this).stop().animate(
		{"height":"400px"},
		{queue:false,duration:600,easing:"easeOutBounce"}
		);
		})*/
		//或者如下代码：转载请注明www.chhua.com
		$("#t1").hover(function(){
		$(this).stop().animate(
		{"left":"400px",
		"top":"200px",
		"height":"400px"},
		"easeOutBounce"
		);
		})

附Easing 效果演示地址：http://james.padolsey.com/demos/jquery/easing/

自由转载，转载请注明： 转载自WEB开发笔记 www.chhua.com

本文链接地址: JQuery的Easing插件配合animate实现动画方法 http://www.chhua.com/web-note3792

相关笔记

更多