jquery学习随笔(动画效果)

jQuery 中显示方法为：.show()，隐藏方法为：.hide()。在无参数的时候，只是硬性的显
示内容和隐藏内容。
$(‘.show‘).click(function () { //显示
$(‘#box‘).show();
});
$(‘.hide‘).click(function () { //隐藏
$(‘#box‘).hide();
});

//使用.show()和.hide()的回调函数，可以实现列队动画效果。
$(‘.show‘).click(function () {
$(‘#box‘).show(‘slow‘, function () {
alert(‘动画持续完毕后，执行我！‘);
});
});
//列队动画，使用函数名调用自身
$(‘.show‘).click(function () {
$(‘div‘).first().show(‘fast‘, function showSpan() {
$(this).next().show(‘fast‘, showSpan);
});
});
//列队动画，使用arguments.callee 匿名函数自调用
$(‘.hide‘).click(function () {
$(‘div‘).last().hide(‘fast‘, function() {
$(this).prev().hide(‘fast‘, 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();
});

jQuery 提供了几种简单常用的固定动画方面我们使用。但有些时候，这些简单动画无法满足我们更加复杂的需求。这个时候，jQuery 提供了一个.animate()方法来创建我们的自定
义动画，满足更多复杂多变的要求。
$(‘.animate‘).click(function () {
$(‘#box‘).animate({
‘width‘ : ‘300px‘,
‘height‘ : ‘200px‘,
‘fontSize‘ : ‘50px‘,
‘opacity‘ : 0.5
});
});

　jQuery 提供了自定义动画的累加、累减功能。
　$(‘.animate‘).click(function () {
　$(‘#box‘).animate({
　‘left‘ : ‘+=100px‘,
　});
　});

自定义实现列队动画的方式，有两种：1.在回调函数中再执行一个动画；2.通过连缀或顺序来实现列队动画（使用这种方式必须是同一个元素）。
//通过依次顺序实现列队动画
$(‘.animate‘).click(function () {
$(‘#box‘).animate({‘left‘ : ‘100px‘});
$(‘#box‘).animate({‘top‘ : ‘100px‘});
$(‘#box‘).animate({‘width‘ : ‘300px‘});
});
注意：如果不是同一个元素，就会实现同步动画
//通过连缀实现列队动画
$(‘.animate‘).click(function () {
$(‘#box‘).animate({
‘left‘ : ‘100px‘
}).animate({
‘top‘ : ‘100px‘
}).animate({
‘width‘ : ‘300px‘
});
});
//通过回调函数实现列队动画
$(‘.animate‘).click(function () {
$(‘#box‘).animate({
‘left‘ : ‘100px‘
}, function () {
$(‘#box‘).animate({
‘top‘ : ‘100px‘
}, function () {
$(‘#box‘).animate({
‘width‘ : ‘300px‘
});
});
});
});