1、JQuery使用 hide() 和 show() 方法来隐藏和显示 HTML 元素;
语法:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:”slow”、”fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
Show()和hide()所产生的是具有下拉显示和上拉隐藏的动画过程,这和后面说道的方法会有所不同,所以我们要驾驭他们,就必须要学会区别他们。
2、JQuery使用 fadeIn() 和 fadeOut() 方法来淡入和淡出 HTML 元素;
下面是fadeIn()和fadeOut()这两个方法,它产生的动画效果是改变对象透明度的来实现的,通俗点就是淡入淡出效果。fadeIn()是淡入,fadeOut()是淡出。
fadeIn() 用于淡入已隐藏的元素。
语法:
$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
fadeOut() 方法用于淡出可见元素。
语法:
$(selector).fadeOut(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
2、JQuery使用 slideDown() 和 slideUp() 方法来向下滑动元素和向上滑动元素;
和show()和hide()的效果类似就不多说了,看方法:
slideDown() 方法用于向下滑动元素。
语法:
$(selector).slideDown(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
slideUp() 方法用于向上滑动元素。
语法:
$(selector).slideUp(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
还有其他一些方法,下面统一把他们列出来:
淡入淡出效果:
· fadeIn()淡入
· fadeout()淡出
· fadeTo()更改透明度值来产生淡入或者淡出效果
· fadeToggle()淡入淡出效果,集合了fadeIn()和fadeOut()
滑入滑出效果:
· show()向下滑动显示
· hide()向上滑动隐藏
· slideUp()向下滑动显示
· slideDown()向上滑动隐藏
· Toggle()滑动显示和显示,集合了上面的四种方法
· slideToggle()和Toggle()方法一样
最后再来两个方法:借助css()或者animate()修改opacity透明度,或者设置display属性也可以实现显示和隐藏。