首页 > js学习 > js基础知识 > jQuery中显示隐藏,收缩展开和淡入淡出
2016
12-16

jQuery中显示隐藏,收缩展开和淡入淡出

一.显示、隐藏

jQuery 中显示方法为:.show(),隐藏方法为:.hide()。在无参数的时候,只是硬性的显示内容和隐藏内容。

$('.show').click(function () {$('#box').show();});//显示

$('.hide').click(function () {$('#box').hide();});//隐藏

.hide()方法其实就是在行内设置CSS 代码:display:none; 而.show()方法要根据原来元素是区块还是内联来决定,如果是区块,则设置CSS 代码:display:block; 如果是内联,则设置CSS 代码:display:inline;。

在.show()和.hide()方法可以传递一个参数,这个参数以毫秒(1000毫秒等于 1 秒钟)来控制速度。并且里面富含了匀速变大变小,以及透明度变换。

$('.show').click(function () {$('#box').show(1000);}); //显示用了 1 秒

$('.hide').click(function () {$('#box').hide(1000);}); //隐藏用了 1 秒

除了直接使用毫秒来控制速度外,jQuery 还提供了三种预设速度参数字符串:slow、normal和fast,分别对应 600毫秒、400毫秒和 200毫秒。不管是传递毫秒数还是传递预设字符串,如果不小心传递错误或者传递空字符串。那么它将采用默认值:400毫秒。

使用.show()和.hide()的回调函数,可以实现列队动画效果。

$('.show').click(function () {$('div').first().show('fast',function showSpan(){$(this).next().show('fast', showSpan);});});//列队动画,使用函数名调用自身

$('.hide').click(function () {$('div').last().hide('fast', function() {$(this).prev().hide('fast', arguments.callee);});});//列队动画,使用 arguments.callee匿名函数自调用

我们在使用.show()和.hide()的时候,如果需要一个按钮切换操作,需要进行一些条件判断。而jQuery 提供给我们一个类似功能的独立方法:.toggle()。

$('.toggle').click(function () {$(this).toggle('slow');});

二.收缩、展开

jQuery 提供了一组改变元素高度的方法:.slideUp()、.slideDown()和.slideToggle()。顾名思义,向上收缩(卷动)、向下展开(滑动)和切换功能。

$('.down').click(function () {$('#box').slideDown();});

$('.up').click(function () {$('#box').slideUp();});

$('.toggle').click(function () {$('#box').slideToggle();});

滑动、卷动效果和显示、隐藏效果一样,具有相同的参数和用法。

三.淡入、淡出

jQuery 提供了一组专门用于透明度变化的方法:.fadeIn()和.fadeOut(),分别表示淡入、淡出,当然还有一个自动切换的方法:.fadeToggle()。

$('.in').click(function () {$('#box').fadeIn('slow');});

$('.out').click(function () {$('#box').fadeOut('slow');});

$('.toggle').click(function () {$('#box').fadeToggle();});

淡入、淡出效果和显示、隐藏效果一样,具有相同的参数和方法。

上面三个透明度方法只能是从0 到100,或者从 100到 0,如果我们想设置指定值就没有办法了。而 jQuery 为了解决这个问题提供了.fadeTo()方法。

$('.toggle').click(function () {$('#box').fadeTo('slow', 0.33);});//0.33表示值为 33

最后编辑:
作者:qingheluo
这个作者貌似有点懒,什么都没有留下。