jQuery事件 - jQuery 如下函数如何使用？演示使用方
2018-07-28 本文已影响0人
初入前端的小菜鸟
.show().hide().slideUp.slideDown.slideToggle.fadeIn.fadeOut.animate
如上函数如何使用？演示使用方式
-
.hide()
.hide([duration ] [,easing ] [,complete ])
用于隐藏元素，没有参数的时候等同于直接设置display属性
示例：
<style>
div {
background:#ccc;
width:100px;
height:100px;
border:1px solid;
}
</style>
</head>
<body>
<div>
</div>
</body>
<script>
$('div').hide() // == $('.target').css('display', 'none')
</script>
image
当我们给
hide设置事件时：hide(2000)会有一个消失的过程效果：
image
-
.show()
.show( [duration ] [, easing ] [, complete ] )
用于显示元素，用法和hide类似
给显示元素设置一个现实的时间
$('div').hide(2000) // 隐藏时间为2s
$('div').show(2000) //显示时间为2s
效果:
image
-
.slideUp
.slideUp( [duration ] [, easing ] [, complete ] )
用滑动动画隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑上去，当一个隐藏动画后，高度值达到0的时候，display 样式属性被设置为none，以确保该元素不再影响页面布局。
效果：（代码基于hide）
$('div').slideUp()
image
-
.slideDown
用滑动动画显示一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑下去，弥补了显示的方式
效果：（代码基于slideUp）
image
.slideToggle
用滑动动画显示或隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面中，在这个元素下面的内容往下或往上滑。display属性值保存在jQuery的数据缓存中，所以display可以方便以后可以恢复到其初始值。
如果一个元素的display属性值为inline，然后是隐藏和显示，这个元素将再次显示inline。当一个隐藏动画后，高度值达到0的时候，display 样式属性被设置为none，以确保该元素不再影响页面布局。
效果：
连续调用两次，和使用.slideUp()、.slideDown效果相同
image
-
.fadeIn
.fadeIn( [duration ] [, easing ] [, complete ] )
通过淡入的方式显示匹配元素，参数含义和上面相同
给div的css属性设置display:none
$('div').fadeIn(2000)
效果:
image
-
.fadeOut
.fadeOut( [duration ] [, easing ] [, complete ] )
通过淡出的方式隐藏匹配元素
取消div的css中的display:none
效果：
image
上面几个简单的动画不能满足需求的时候，jquery提供了自定义动画行为的方法
-
.animate
.animate( properties [, duration ] [, easing ] [, complete ] )
官方文档
简单示例：
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123"
style="position: relative; left: 10px;">
要同时为图像的不透明度，左偏移和高度设置动画：
$( "#clickme" ).click(function() {
$( "#book" ).animate({
opacity: 0.25, // 图片透明度 渐变
left: "+=50", //向左移动距离 -- 原基础上+50px;
height: "toggle" //
}, 5000, function() {
// Animation complete.
});
});
height属性的目标值是'toggle'。由于之前图像是可见的，因此动画会将高度缩小为0以隐藏它。第二次点击然后反转此转换
效果:
image
