當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

网站建设中前端常用的jQuery+easing缓动的动画

發布時間：2023/12/18 HTML 24 豆豆

生活随笔收集整理的這篇文章主要介紹了网站建设中前端常用的jQuery+easing缓动的动画小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

網站建設中前端人員利用jQuery實現動畫再簡單不過了，只是要實現更酷的效果還需要插件來幫忙，easing就是一款幫助jQuery實現緩動動畫的插件，經過試用，效果很不錯！

下載該插件：jquery.easing.1.3.js　jquery.easing.compatibility.js

該插件美化排版后是130行左右，壓縮后更小。這個插件彌補了jquery里面的動畫效果的不足，是其動畫效果更加強悍。

X軸表示時間，Y軸表示的是動畫效果的變化。查看這些曲線變化，更利于掌握這個插件的效果。

插件支持站：http://gsgd.co.uk/sandbox/jquery/easing/

效果演示站點：http://james.padolsey.com/demos/jquery/easing/

我們可以通過效果演示站點查看具體運行效果,也可以通過坐標標注的直觀效果來了解其運行具體軌跡。例如下圖：

常用參數：

linear
swing
jswing
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

方法介紹：

def：默認方式設置
swing：默認方式加載
Quad：二次方緩動(t)
Cubic：三次方緩動
Quart：四次方緩動
Quint：五次方緩動
Sine：正弦曲線緩動
Expo：指數曲線緩動
Circ：圓形曲線的緩動
Elastic：指數衰減的正弦曲線緩動
Back：超過范圍的三次方緩動
Bounce：指數衰減的反彈緩動

關于In、Out、Inout的說明：

easeIn：加速度緩動；
easeOut：減速度緩動；
easeInOut：先加速度至50%，再減速度完成動畫。

如何應用：

$(element).slideUp(duration,easing,[callback]);

fadeTo

$(element).fadeTo(duration,opacity,easing,[callback]);

animate

$(element).animate({properties},duration,easing,callback);

jQuery1.4+版本更可以：

$(element).animate({left:[100,'swing'],top:[100,'easeOutBounce']});

或者

jQuery(myElement).animate({left:100,top:100},{specialEasing:{left: 'swing',top:'easeOutBounce'}});

具體可參閱jquery1.4+的API。

簡單實例：

$(document).ready(function(){?

$("#xxxx").stop(true,false).animate({left?:?-320},1500,'easeOutElastic');?

})?

</script>?

開始使用jQuery Easing

方法1、設置jQuery默認動畫效果

jQuery.easing.def?=?“method”;//如：easeOutExpo?

方法2、jQuery默認動畫

支持toggle()、slideUp()、slideDown()、show()、hide()等jQuery內置的動畫效果

如以下代碼：

$(element).slideUp({?

????duration:?1000,??

????easing:?method,??

????complete:?callback});?

方法3、使用jQuery自定義動畫函數.animate()

jQuery 的.animate()是自定義動畫的函數，如上面所說，有四個參數，而其中easing的參數就是我們進行動畫效果擴展的方法名稱（如easeOutExpo）。網站建設中最簡單的使用方法是：

$(myElement).animate({?

????left:?500,?

????top:?500?

},?'easeOutExpo');?

James?Padolsey對jQuery1.3.2的animate函數進行了修改擴展：?

jQuery.fn.animate?=?(function(_anim){?

var?jQEasing?=?jQuery.easing;?

return?function(prop,?duration,?easing,?callback)?{?

var?props?=?{},?optall,?i,?hasEaser?=?false;?

for?(?i?in?prop?)?{?

if?(?jQuery.isArray(prop[i])?)?{?

hasEaser?=?true;?

props[i]?=?prop[i][1];?

prop[i]?=?prop[i][0];?

opt?=?jQuery.speed(duration,?easing,?callback);?

if?(hasEaser)?{?

opt.step?=?(function(_step){?

return?function(now,?fx)?{?

var?end?=?fx.end,?easeFn;?

if?(?easeFn?=?props[fx.prop]?)?{?

fx.now?=?jQEasing[easeFn](?now/end,?now,?0,?end,?end?);?

_step?&&?_step.call(?fx.elem,?fx.now,?fx?);?

};?

})(opt.step);?

optopt.complete?=?opt.old?||?callback?||?jQuery.isFunction(easing)?&&?easing;?

return?_anim.call(?this,?prop,?opt?);?

};?

})(jQuery.fn.animate);??

在jQuery1.4中這種方式已經被引入，所以jQuery1.4中不需要添加jQuery的animate()擴展，我們就可以使用下面的更加方便代碼啦：

$(myElement).animate({?

????left:?500,?

????top:?[500,?'easeOutBounce']??

},?1000,'swing');?

jQuery1.4 的animate()+Easing

jQuery(myElement).animate({?

left:?[500,?'swing'],?

top:?[200,?'easeOutBounce']?

});?

或者：?

jQuery(myElement).animate({?

left:?500,?

top:?200?

},?{?

specialEasing:?{?

left:?'swing',?

top:?'easeOutBounce'?

});??

轉載于:https://www.cnblogs.com/goody9807/p/4338431.html

總結

以上是生活随笔為你收集整理的网站建设中前端常用的jQuery+easing缓动的动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：基于Sql Server 2008的分布
下一篇： swagger详解