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()的回調函數中應用時,按順序發生(排隊效果)