热门关键字:
jquery > jquery教程 > 插件详解 > Jquery插件之动画效果详解

Jquery插件之动画效果详解

3910
作者:管理员
发布时间:2012/8/17 14:03:17
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=60
 
easing.js中有以下30种效果
 
easeInQuad 
       
easeOutQuad
       
easeInOutQuad

easeInCubic

easeOutCubic

easeInOutCubic

easeInQuart

easeOutQuart

easeInOutQuart

easeInQuint

easeOutQuint

easeInOutQuint

 
easeInSine

easeOutSine

easeInOutSine

easeInExpo

easeOutExpo

easeInOutExpo

easeInCirc

 
easeOutCirc

 
easeInOutCirc

 
easeInElastic

 
easeOutElastic

 
easeInOutElastic

 
easeInBack

 
easeOutBack

 
easeInOutBack

 
easeInBounce

 
easeOutBounce

 
easeInOutBounce

从上面的可以看出 每一种 都分为 In   Out    InOut

In:是指动画开始的时候 具有这个效果

Out:是指动画结束的时候具有这个效果
InOut:是指动画开始和结束的时候都具有这个效果

Elastic:就是具有弹簧效果的(easeInElastic[开始时弹簧]、easeOutElastic[结束时弹簧]、easeInOutElastic[开始和结束都弹簧])
 
使用方法:(直接复制代码运行即可看到效果)
<script type="text/javascript" language="javascript" src="http://www.jq-school.com/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" language="javascript" src="http://www.jq-school.com/js/easing.js"></script>
<script language="javascript" type="text/javascript">
    $(document).ready(function(){ $("#test").stop(true,false).animate({left : 200},5000,'easeOutElastic'); })
 </script>
<div id="test" style="position:fixed; left:500px; top:500px; background:#000; width:100px; height:100px;"></div>




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:Jquery插件
友荐云推荐