Jquery中给animation加更多的运作效果实例
//animation
jQuery.extend({
easing:
{ //*******back
backEaseIn:function(p,n,firstNum,diff){
varc=firstNum+diff;
vars=1.70158;//defaultovershootvalue,canbeadjustedtosuit
returnc*(p/=1)*p*((s+1)*p-s)+firstNum;
},
backEaseOut:function(p,n,firstNum,diff){
varc=firstNum+diff;
vars=1.70158;//defaultovershootvalue,canbeadjustedtosuit
returnc*((p=p/1-1)*p*((s+1)*p+s)+1)+firstNum;
},
backEaseInOut:function(p,n,firstNum,diff){
varc=firstNum+diff;
vars=1.70158;//defaultovershootvalue,canbeadjustedtosuit
if((p/=0.5)<1)
returnc/2*(p*p*(((s*=(1.525))+1)*p-s))+firstNum;
else
returnc/2*((p-=2)*p*(((s*=(1.525))+1)*p+s)+2)+firstNum;
},
//*******bounce
bounceEaseIn:function(p,n,firstNum,diff){
varc=firstNum+diff;
varinv=this.bounceEaseOut(1-p,1,0,diff);
returnc-inv+firstNum;
},
bounceEaseOut:function(p,n,firstNum,diff){
varc=firstNum+diff;
if(p<(1/2.75)){
returnc*(7.5625*p*p)+firstNum;
}
elseif(p<(2/2.75)){
returnc*(7.5625*(p-=(1.5/2.75))*p+.75)+firstNum;
}
elseif(p<(2.5/2.75)){
returnc*(7.5625*(p-=(2.25/2.75))*p+.9375)+firstNum;
}
else{
returnc*(7.5625*(p-=(2.625/2.75))*p+.984375)+firstNum;
}
},
//*******circ
circEaseIn:function(p,n,firstNum,diff){
varc=firstNum+diff;
return-c*(Math.sqrt(1-(p/=1)*p)-1)+firstNum;
},
circEaseOut:function(p,n,firstNum,diff){
varc=firstNum+diff;
returnc*Math.sqrt(1-(p=p/1-1)*p)+firstNum;
},
circEaseInOut:function(p,n,firstNum,diff){
varc=firstNum+diff;
if((p/=0.5)<1)
return-c/2*(Math.sqrt(1-p*p)-1)+firstNum;
else
returnc/2*(Math.sqrt(1-(p-=2)*p)+1)+firstNum;
},
//*******cubic
cubicEaseIn:function(p,n,firstNum,diff){
varc=firstNum+diff;
returnc*(p/=1)*p*p+firstNum;
},
cubicEaseOut:function(p,n,firstNum,diff){
varc=firstNum+diff;
returnc*((p=p/1-1)*p*p+1)+firstNum;
},
cubicEaseInOut:function(p,n,firstNum,diff){
varc=firstNum+diff;
if((p/=0.5)<1)
returnc/2*p*p*p+firstNum;
else
returnc/2*((p-=2)*p*p+2)+firstNum;
},
//*******elastic
elasticEaseIn:function(p,n,firstNum,diff){
varc=firstNum+diff;
if(p==0)returnfirstNum;
if(p==1)returnc;
varperoid=0.25;
vars;
varamplitude=c;
if(amplitude<Math.abs(c)){
amplitude=c;
s=peroid/4;
}
else{
s=peroid/(2*Math.PI)*Math.asin(c/amplitude);
}
return-(amplitude*Math.pow(2,10*(p-=1))*Math.sin((p*1-s)*(2*Math.PI)/peroid))+firstNum;
},
elasticEaseOut:function(p,n,firstNum,diff){
varc=firstNum+diff;
if(p==0)returnfirstNum;
if(p==1)returnc;
varperoid=0.25;
vars;
varamplitude=c;
if(amplitude<Math.abs(c)){
amplitude=c;
s=peroid/4;
}
else{
s=peroid/(2*Math.PI)*Math.asin(c/amplitude);
}
return-(amplitude*Math.pow(2,-10*p)*Math.sin((p*1-s)*(2*Math.PI)/peroid))+c;
},
//*******expo
expoEaseIn:function(p,n,firstNum,diff){
varc=firstNum+diff;
return(p==0)?firstNum:c*Math.pow(2,10*(p-1))+firstNum-c*0.001;
},
expoEaseOut:function(p,n,firstNum,diff){
varc=firstNum+diff;
return(p==1)?c:diff*1.001*(-Math.pow(2,-10*p)+1)+firstNum;
},
expoEaseInOut:function(p,n,firstNum,diff){
varc=firstNum+diff;
if(p==0)returnfirstNum;
if(p==1)returnc;
if((p/=0.5)<1)
returnc/2*Math.pow(2,10*(p-1))+firstNum-c*0.0005;
else
returnc/2*1.0005*(-Math.pow(2,-10*--p)+2)+firstNum;
},
//*******quad
quadEaseIn:function(p,n,firstNum,diff){
varc=firstNum+diff;
returnc*(p/=1)*p+firstNum;
},
quadEaseOut:function(p,n,firstNum,diff){
varc=firstNum+diff;
return-c*(p/=1)*(p-2)+firstNum;
},
quadEaseInOut:function(p,n,firstNum,diff){
varc=firstNum+diff;
if((p/=0.5)<1)
returnc/2*p*p+firstNum;
else
return-c/2*((--p)*(p-2)-1)+firstNum;
},
//*******quart
quartEaseIn:function(p,n,firstNum,diff){
varc=firstNum+diff;
returnc*(p/=1)*p*p*p+firstNum;
},
quartEaseOut:function(p,n,firstNum,diff){
varc=firstNum+diff;
return-c*((p=p/1-1)*p*p*p-1)+firstNum;
},
quartEaseInOut:function(p,n,firstNum,diff){
varc=firstNum+diff;
if((p/=0.5)<1)
returnc/2*p*p*p*p+firstNum;
else
return-c/2*((p-=2)*p*p*p-2)+firstNum;
},
//*******quint
quintEaseIn:function(p,n,firstNum,diff){
varc=firstNum+diff;
returnc*(p/=1)*p*p*p*p+firstNum;
},
quintEaseOut:function(p,n,firstNum,diff){
varc=firstNum+diff;
returnc*((p=p/1-1)*p*p*p*p+1)+firstNum;
},
quintEaseInOut:function(p,n,firstNum,diff){
varc=firstNum+diff;
if((p/=0.5)<1)
returnc/2*p*p*p*p*p+firstNum;
else
returnc/2*((p-=2)*p*p*p*p+2)+firstNum;
},
//******* sine
sineEaseIn:function(p,n,firstNum,diff){
varc=firstNum+diff;
return-c*Math.cos(p*(Math.PI/2))+c+firstNum;
},
sineEaseOut:function(p,n,firstNum,diff){
varc=firstNum+diff;
returnc*Math.sin(p*(Math.PI/2))+firstNum;
},
sineEaseInOut:function(p,n,firstNum,diff){
varc=firstNum+diff;
return-c/2*(Math.cos(Math.PI*p)-1)+firstNum;
}
}
});
调用:
$("#div").animate({
left:v
},1000,"circEaseOut");
相关文章
- jquery动画效果实例_动画js
- jquery validation engine ajax验证,jQuery Validation Engine 表单验证「建议收藏」
- jQuery Timers 定时插件使用详解编程语言
- jquery基础知识汇总详解编程语言
- jQuery中文入门指南,翻译加实例,jQuery的起点教程
- jQuery基础教程笔记适合js新手
- Jquery升级新版本后选择器的语法问题
- jQuery中调用WebService方法小结
- PHP+Mysql+jQuery实现发布微博程序jQuery篇
- jQuery提交表单ajax查询实例代码
- jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
- jquery清空textarea等输入框实现代码
- 用jQuery实现一些导航条切换,显示隐藏的实例代码
- 动态获取复选框checkbox选中个数的jquery代码
- jQuery.extend()的实现方式详解及实例
- 基于jquery编写的横向自适应幻灯片切换特效的实例代码
- jQuery实现图片信息的浮动显示实例代码
- Jquery增加鼠标中间功能mousewheel的实例代码
- Jquery数组操作大全个人总结
- jquery实现手风琴效果实例代码
- jquery实现非叠加式的搜索框提示效果
- jQuery实现动画效果的简单实例
- jQuery动画效果animate和scrollTop结合使用实例
- jquery实现的一个简单进度条效果实例
- jQuery插件开发详细教程
- JQuery获取与设置HTML元素的内容或文本的实现代码
- jquery获取radio值实例
- js与jQuery实现的兼容多浏览器Ajax请求实例
- jQuery实现HTML5placeholder效果实例
- jQuery重复加载错误以及修复方法