jQuery学习笔记之十一------动画效果

一  显示，隐藏

$('.show').click(function () {

$('#box').show(1000);

//显示用了 1 秒

});

$('.hide').click(function () {

$('#box').hide(1000);

//隐藏用了 1 秒

});

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

$('.show').click(function () {

$('#box').show('slow', function () {

alert('动画持续完毕后，执行我！');

});

});

$('.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

});

注意：淡入、淡出效果和显示、隐藏效果一样，具有相同的参数。对于.fadeTo()方法，

如果本身透明度大于指定值，会淡出，否则相反

四  自定义动画

$('.animate').click(function () {

$('#box').animate({

'width' : '300px',

'height' : '200px',

'fontSize' : '50px',

'opacity' : 0.5

});

});

必传的参数只有一个，就是一个键值对 CSS 变化样式的对象。还有两个可选参数分别

为速度和回调函数。

$('.animate').click(function () {

$('#box').animate({

'width' : '300px',

'height' : '200px'

}, 1000, function () {

alert('动画执行完毕执行我！');

});

});

五  队列动画方法

//连缀无法实现按顺序列队

$('#box').slideUp('slow').slideDown('slow').css('background', 'orange');

六．动画全局属性

$.fx.interval = 1000;

//默认为 13

$('.button').click(function () {

$('#box').toggle(3000);

});