Jquery中給animation加更多的運(yùn)作效果實(shí)例
//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;
}
}
});
調(diào)用:
$("#div").animate({
left: v
}, 1000, "circEaseOut");
相關(guān)文章
jQuery實(shí)現(xiàn)單擊按鈕遮罩彈出對(duì)話框(仿天貓的刪除對(duì)話框)
單擊刪除按鈕或者登陸按鈕后，彈出對(duì)話框問你是否刪除或者彈出一個(gè)登陸對(duì)話框，本文使用jquery來實(shí)現(xiàn)這種效果，需要的朋友可以參考下2014-04-04
基于jquery實(shí)現(xiàn)圖片相關(guān)操作（重繪、獲取尺寸、調(diào)整大小、縮放）
這篇文章主要介紹了基于jquery實(shí)現(xiàn)圖片相關(guān)操作，包括圖片重繪、圖片獲取尺寸、圖片調(diào)整大小、圖片縮放，感興趣的小伙伴們可以參考一下2015-12-12
基于JQuery實(shí)現(xiàn)頁面定時(shí)彈出廣告
這篇文章主要介紹了基于JQuery實(shí)現(xiàn)頁面定時(shí)彈出廣告,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
jquery實(shí)現(xiàn)仿Flash的橫向滑動(dòng)菜單效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)仿Flash的橫向滑動(dòng)菜單效果代碼,可實(shí)現(xiàn)滑塊跟隨鼠標(biāo)滑動(dòng)效果的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
這篇文章主要介紹了JQuery常用選擇器功能與用法,結(jié)合實(shí)例形式分析了jquery常見選擇器基本功能、使用方法及操作注意事項(xiàng),需要的朋友可以參考下2019-12-12
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)圖片輪播器的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了關(guān)于jquery layui彈出層的使用方法,需要的朋友可以參考下2018-04-04
使用EasyUI最好的方法不是學(xué)會(huì)，所有的東西都敲一遍，你也沒辦法敲得完，而是找到一個(gè)好的文檔。本文提供文檔的下載，并對(duì)jQueryEasyUI的使用進(jìn)行實(shí)例解析，需要的朋友可以參考下2016-11-11
jQuery(1.6.3) 中css方法對(duì)浮動(dòng)的實(shí)現(xiàn)缺陷分析
JavaScript中設(shè)置元素的浮動(dòng)屬性（float），標(biāo)準(zhǔn)瀏覽器使用cssFloat，IE舊版本使用styleFloat。2011-09-09
這篇文章主要介紹了jQuery判斷checkbox是否選中的3種方法,本文中的方法使用ID選擇器實(shí)現(xiàn),比網(wǎng)上其它的一些長(zhǎng)篇大論的文章更加簡(jiǎn)練,需要的朋友可以參考下2014-08-08