原理:Robert Penners缓动等式
http://www.robertpenner.com/easing/
使用easing之前需要引入js:
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
easing.js中有以下效果
jswingdef
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="JS/jquery.js"></script>
<script type="text/javascript" language="javascript" src="JS/easing.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#xxxx").stop(true,false).animate({left : -320},1500,'easeOutElastic');
})
</script>
例如:
$(document).ready(function(){
$("#fad2_bg").height(document.body.scrollHeight+200);
$("#fad2_bg").fadeIn("fast","linear",function(){
$("#fad2").show();
$("#fad2").animate({top: '0px'}, 1500, "easeOutBounce");
});
setTimeout(fad2close,4000);
});
function fad2close(){
$("#fad2").animate({top: '-650px'}, 1500, "easeInOutElastic",function(){
$("#fad2_bg").fadeOut("slow");
})
}