jquery在$.animate()這個介面上又封裝了幾個API，用於進行匹配元素的便捷動畫，如下: $(selector).show(speed,easing,callback) ;如果被選元素已被隱藏，則顯示這些元素 $(selector).hide(speed,easing,callback) ...
jquery在$.animate()這個介面上又封裝了幾個API，用於進行匹配元素的便捷動畫，如下:
- $(selector).show(speed,easing,callback) ;如果被選元素已被隱藏，則顯示這些元素
- $(selector).hide(speed,easing,callback) ;如果被選的元素已被顯示，則隱藏該元素
- $(selector).toggle(speed,easing,callback) ;切換元素的可見狀態，如果被選元素可見，則隱藏這些元素，如果被選元素隱藏，則顯示這些元素。
writer by:大沙漠 QQ:22969969
- $(selector).slideDown(speed,easing,callback); ;向下滑動元素。
- $(selector).slideUp(speed,easing,callback); ;向上滑動元素
- $(selector).slideToggle(speed,easing,callback); ;在 slideDown() 與 slideUp() 方法之間進行切換。
- $(selector).fadeIn(speed,easing,callback); ;顯示已隱藏的元素，慢慢的變淡，直至消失。
- $(selector).fadeOut(speed,easing,callback); ;隱藏可見元素,慢慢的顯示，直至完全可見
- $(selector).fadeToggle(speed,easing,callback); ;在fadeIn()與fadeOut()方法之間進行切換。如果元素已淡出，則fadeToggle()會向元素添加淡入效果。如果元素已淡入，則fadeToggle()會向元素添加淡出效果。
參數都是一樣的:
- speed ;動畫持續的時間，預設為0，可設為"slow"、"normal"、"fast"或毫秒數
- easing ;動畫函數，支持現行緩動函數linear和餘弦緩動函數swing,預設是swing
- callback ;動畫執行完之後，要執行的函數
舉個例子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> <style> html,body,div,p{margin:0;padding:0;} div{width: 200px;height: 50px;float: left;margin:20px 20px 0 20px;} p{width: 200px;height: 50px;background: #f0c;border-radius: 4px;} select{border-color: #dcdfe6;height: 40px;line-height: 40px;padding:0 15px;font-size: 16px;margin-top: 20px;border-radius: 4px;} option{font-size: 14px;line-height: 34px;padding:0 20px;color: #606266;height: 34px;display: } </style> </head> <body> <div><p></p></div><select></select> <script> //給select新增下拉選項 ['show','hide','toggle','slideDown','slideUp','slideToggle','fadeIn','fadeOut','fadeToggle'].forEach(function(val){ $('select').append(`<option value="${val}">${val}</option>`) }) //監聽select的選擇事件,執行p元素對應的動畫事件 $('select').change(function(){ $('p')[$(this).val()](1000,'swing'); }) </script> </body> </html>
效果如下:
由於不需要載入插件，只要一個jQuery就可以實現這些動畫了，所以使用起來是很方便的。
內部實現就是對於$.animate()的封裝而已，如下:
var fxAttrs = [ // height animations [ "height", "marginTop", "marginBottom", "paddingTop", "paddingBottom" ], //高度動畫 // width animations [ "width", "marginLeft", "marginRight", "paddingLeft", "paddingRight" ], //寬度動畫 // opacity animations [ "opacity" ] //透明度 ]; function genFx( type, num ) { //負責為便捷方法生成動畫樣式集 var obj = {}; jQuery.each( fxAttrs.concat.apply([], fxAttrs.slice( 0, num )), function() { obj[ this ] = type; }); return obj; } //比如:getFx('show',1)生成的動畫樣式集合為:Object { height: "show", marginTop: "show", marginBottom: "show", paddingTop: "show", paddingBottom: "show" } jQuery.each({ slideDown: genFx( "show", 1 ), slideUp: genFx( "hide", 1 ), slideToggle: genFx( "toggle", 1 ), fadeIn: { opacity: "show" }, fadeOut: { opacity: "hide" }, fadeToggle: { opacity: "toggle" } }, function( name, props ) { jQuery.fn[ name ] = function( speed, easing, callback ) { //新增slideDown、slideUp、slideToggle、fadeIn、fadeOut、fadeToggle便捷方法 return this.animate( props, speed, easing, callback ); }; });
