Jquery中给animation加更多的运作效果实例_jquery
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Jquery中给animation加更多的运作效果实例_jquery，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7463字，纯文字阅读大概需要11分钟。
内容图文
//animation
jQuery.extend({
easing:
{ // ******* back
backEaseIn: function (p, n, firstNum, diff) {
var c = firstNum + diff;
var s = 1.70158; // default overshoot value, can be adjusted to suit
return c * (p /= 1) * p * ((s + 1) * p - s) + firstNum;
},
backEaseOut: function (p, n, firstNum, diff) {
var c = firstNum + diff;
var s = 1.70158; // default overshoot value, can be adjusted to suit
return c * ((p = p / 1 - 1) * p * ((s + 1) * p + s) + 1) + firstNum;
},
backEaseInOut: function (p, n, firstNum, diff) {
var c = firstNum + diff;
var s = 1.70158; // default overshoot value, can be adjusted to suit
if ((p /= 0.5) < 1)
return c / 2 * (p * p * (((s *= (1.525)) + 1) * p - s)) + firstNum;
else
return c / 2 * ((p -= 2) * p * (((s *= (1.525)) + 1) * p + s) + 2) + firstNum;
},
// ******* bounce
bounceEaseIn: function (p, n, firstNum, diff) {
var c = firstNum + diff;
var inv = this.bounceEaseOut(1 - p, 1, 0, diff);
return c - inv + firstNum;
},
bounceEaseOut: function (p, n, firstNum, diff) {
var c = firstNum + diff;
if (p < (1 / 2.75)) {
return c * (7.5625 * p * p) + firstNum;
}
else if (p < (2 / 2.75)) {
return c * (7.5625 * (p -= (1.5 / 2.75)) * p + .75) + firstNum;
}
else if (p < (2.5 / 2.75)) {
return c * (7.5625 * (p -= (2.25 / 2.75)) * p + .9375) + firstNum;
}
else {
return c * (7.5625 * (p -= (2.625 / 2.75)) * p + .984375) + firstNum;
}
},
// ******* circ
circEaseIn: function (p, n, firstNum, diff) {
var c = firstNum + diff;
return -c * (Math.sqrt(1 - (p /= 1) * p) - 1) + firstNum;
},
circEaseOut: function (p, n, firstNum, diff) {
var c = firstNum + diff;
return c * Math.sqrt(1 - (p = p / 1 - 1) * p) + firstNum;
},
circEaseInOut: function (p, n, firstNum, diff) {
var c = firstNum + diff;
if ((p /= 0.5) < 1)
return -c / 2 * (Math.sqrt(1 - p * p) - 1) + firstNum;
else
return c / 2 * (Math.sqrt(1 - (p -= 2) * p) + 1) + firstNum;
},
// ******* cubic
cubicEaseIn: function (p, n, firstNum, diff) {
var c = firstNum + diff;
return c * (p /= 1) * p * p + firstNum;
},
cubicEaseOut: function (p, n, firstNum, diff) {
var c = firstNum + diff;
return c * ((p = p / 1 - 1) * p * p + 1) + firstNum;
},
cubicEaseInOut: function (p, n, firstNum, diff) {
var c = firstNum + diff;
if ((p /= 0.5) < 1)
return c / 2 * p * p * p + firstNum;
else
return c / 2 * ((p -= 2) * p * p + 2) + firstNum;
},
// ******* elastic
elasticEaseIn: function (p, n, firstNum, diff) {
var c = firstNum + diff;
if (p == 0) return firstNum;
if (p == 1) return c;
var peroid = 0.25;
var s;
var amplitude = 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) {
var c = firstNum + diff;
if (p == 0) return firstNum;
if (p == 1) return c;
var peroid = 0.25;
var s;
var amplitude = 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) {
var c = firstNum + diff;
return (p == 0) ? firstNum : c * Math.pow(2, 10 * (p - 1)) + firstNum - c * 0.001;
},
expoEaseOut: function (p, n, firstNum, diff) {
var c = firstNum + diff;
return (p == 1) ? c : diff * 1.001 * (-Math.pow(2, -10 * p) + 1) + firstNum;
},
expoEaseInOut: function (p, n, firstNum, diff) {
var c = firstNum + diff;
if (p == 0) return firstNum;
if (p == 1) return c;
if ((p /= 0.5) < 1)
return c / 2 * Math.pow(2, 10 * (p - 1)) + firstNum - c * 0.0005;
else
return c / 2 * 1.0005 * (-Math.pow(2, -10 * --p) + 2) + firstNum;
},
// ******* quad
quadEaseIn: function (p, n, firstNum, diff) {
var c = firstNum + diff;
return c * (p /= 1) * p + firstNum;
},
quadEaseOut: function (p, n, firstNum, diff) {
var c = firstNum + diff;
return -c * (p /= 1) * (p - 2) + firstNum;
},
quadEaseInOut: function (p, n, firstNum, diff) {
var c = firstNum + diff;
if ((p /= 0.5) < 1)
return c / 2 * p * p + firstNum;
else
return -c / 2 * ((--p) * (p - 2) - 1) + firstNum;
},
// ******* quart
quartEaseIn: function (p, n, firstNum, diff) {
var c = firstNum + diff;
return c * (p /= 1) * p * p * p + firstNum;
},
quartEaseOut: function (p, n, firstNum, diff) {
var c = firstNum + diff;
return -c * ((p = p / 1 - 1) * p * p * p - 1) + firstNum;
},
quartEaseInOut: function (p, n, firstNum, diff) {
var c = firstNum + diff;
if ((p /= 0.5) < 1)
return c / 2 * p * p * p * p + firstNum;
else
return -c / 2 * ((p -= 2) * p * p * p - 2) + firstNum;
},
// ******* quint
quintEaseIn: function (p, n, firstNum, diff) {
var c = firstNum + diff;
return c * (p /= 1) * p * p * p * p + firstNum;
},
quintEaseOut: function (p, n, firstNum, diff) {
var c = firstNum + diff;
return c * ((p = p / 1 - 1) * p * p * p * p + 1) + firstNum;
},
quintEaseInOut: function (p, n, firstNum, diff) {
var c = firstNum + diff;
if ((p /= 0.5) < 1)
return c / 2 * p * p * p * p * p + firstNum;
else
return c / 2 * ((p -= 2) * p * p * p * p + 2) + firstNum;
},
// ******* sine
sineEaseIn: function (p, n, firstNum, diff) {
var c = firstNum + diff;
return -c * Math.cos(p * (Math.PI / 2)) + c + firstNum;
},
sineEaseOut: function (p, n, firstNum, diff) {
var c = firstNum + diff;
return c * Math.sin(p * (Math.PI / 2)) + firstNum;
},
sineEaseInOut: function (p, n, firstNum, diff) {
var c = firstNum + diff;
return -c / 2 * (Math.cos(Math.PI * p) - 1) + firstNum;
}
}
});
调用:
$("#div").animate({
left: v
}, 1000, "circEaseOut");
内容总结
以上是互联网集市为您收集整理的Jquery中给animation加更多的运作效果实例_jquery全部内容，希望文章能够帮你解决Jquery中给animation加更多的运作效果实例_jquery所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。