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 );
};
});
原文地址：https://www.cnblogs.com/greatdesert/p/12120996.html
时间： 2024-10-15 07:54:53