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

相关笔记

更多