jQuery learn - 3 - 动画

对于jQuery提供的任何效果,均可以指定2种预设速度参数: 'slow' 和 'fast' 。使用.show('slow')会在600ms内完成效果,而.show('fast')则是200ms。若是传入的是其余字符串,jQuery就会在默认的400ms内完成效果。注意,与字符串表示的速度参数名称不一样,数值不需用引号。
.fadeIn()会在一开始设置段落的尺寸,以便内容可以逐渐显示出来。相似地,要逐渐减小不透明度,.fadeOut()
.slideDown()和.slideUp()仅改变元素的高度
.toggle()的做用相似于.show()和.hide()。.slideToggle()的做用相似于.slideDown()和.slideUp()
.animate()用于建立控制更加精细的自定义动画
.animate({property1: 'value1', property2: 'value2'}, duration, easing, function() {alert('The animation is finished.');});形式一
.animate({properties}, {options})或
.animate({
    property1: 'value1',
    property2: 'value2'
}, {
    duration: 'value',
    easing: 'value',
    specialEasing: {
        property1: 'easing1',
        property2: 'easing2'
    },
    complete: function() {
        alert('The animation is finished.');
    },
    queue: true,
    step: callback
});形式二
$(document).ready(function() {
    $('div.label').click(function() {
        var paraWidth = $('div.speech p').outerWidth();
        var $switcher = $(this).parent();
        var switcherWidth = $switcher.outerWidth();
        $switcher.animate({
            borderWidth: '5px',
            left: paraWidth - switcherWidth,
            height: '+=20px'
        }, 'slow');
    });
});一个例子
在使用.animate()时,必须明确CSS对咱们要改变的元素所施加的限制。例如,在元素的CSS定位没有设置成relative/absolute时,调整left属性对于匹配的元素毫无做用。全部块级元素默认的CSS定位属性都是static,这个值精确地代表:在改变元素的定位属性前试图移动它们,它们只会保持静止不动。About absolute && relative
$(document).ready(function() {
    $('div.label').click(function() {
        var paraWidth = $('div.speech p').outerWidth();
        var $switcher = $(this).parent();
        var switcherWidth = $switcher.outerWidth();
        $switcher
            .css({position: 'relative'})
            .fadeTo('fast', 0.5)
            .animate({
                left: paraWidth - switcherWidth
            }, {
                duration: 'slow',
                queue: false
            })
            .fadeTo('slow', 1.0)
            .slideUp('slow')
            .queue(function(next) {
                $switcher.css({backgroundColor: '#f00'});
                next();
            })
            .slideDown('slow');
    });
});越过队列 && 手工队列 (像这样传递1个回调函数,.queue()就能把该函数添加到相应元素的效果队列。添加的next ()可以让队列在中断的地方再接续起来,而后再与后续的.slideDown ('slow')连缀在一块儿。若是在此不用next(),动画就会中断)
一组元素上的效果:(1)当在1个.animate()中以多个属性方式应用时,同时发生;(2)当以方法连缀形式应用时,按顺序发生(排队效果)——除非queue选项值为false
多组元素上的效果:(1)默认同时发生;(2)当在另外一个效果方法或在.queue()的回调函数中应用时,按顺序发生(排队效果)