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);
});