jQuery animate() 方法

jQuery animate() 方法使用元素的樣式屬性執(zhí)行自定義動(dòng)畫(huà)。animate() 方法將現(xiàn)有樣式屬性更改為具有運(yùn)動(dòng)的指定屬性。

指定選擇器以獲取要添加動(dòng)畫(huà)效果的元素的引用，然后使用 JSON 對(duì)象調(diào)用 animate() 方法以獲取樣式屬性、動(dòng)畫(huà)速度和其他選項(xiàng)。

$('選擇器表達(dá)式').animate({ stylePropertyName : 'value'},
                                期間，
                                緩和，
                                打回來(lái)）;
$('選擇器表達(dá)式').animate({ propertyName : 'value'},{ options });

應(yīng)用動(dòng)畫(huà)

在下面的示例中，我們正在使用動(dòng)畫(huà)更改元素的高度和寬度。

$('#myDiv').animate({
                height: '200px',
                width: '200px'
            });
<div id="myDiv" class="redDiv">
</div>

設(shè)置動(dòng)畫(huà)持續(xù)時(shí)間

您可以以毫秒為單位應(yīng)用動(dòng)畫(huà)持續(xù)時(shí)間作為 animate() 方法的第二個(gè)參數(shù)。

$('#myDiv').animate({
                        height: '200px',
                        width: '200px'
                    },
                    5000);
<div id="myDiv" class="redDiv">
</div>

應(yīng)用緩動(dòng)方法

指定一個(gè)字符串參數(shù)，指示用于過(guò)渡的緩動(dòng)函數(shù)。jQuery 庫(kù)提供了兩個(gè)緩動(dòng)函數(shù)：linear 和 swing。

$('#myDiv').animate({
            height: '200px',
            width: '200px'
        },
        5000, 'swing');
<div id="myDiv" class="redDiv">
</div>

動(dòng)畫(huà)完成時(shí)的回調(diào)函數(shù)

指定動(dòng)畫(huà)完成時(shí)要執(zhí)行的回調(diào)函數(shù)。

$('#myDiv').animate({
                        height: '200px',
                        width: '200px'
                    },
                    5000,
                    function () {
                        $('#msgDiv').append('Animation completed');
                    });
        });
<div id="myDiv" class="redDiv">
</div>
<div id="msgDiv"></div>

指定動(dòng)畫(huà)選項(xiàng)

您可以將各種選項(xiàng)指定為 JSON 對(duì)象。選項(xiàng)包括持續(xù)時(shí)間、緩動(dòng)、隊(duì)列、步驟、進(jìn)度、完成、開(kāi)始、完成和始終。

$('#myDiv').animate({
                        height: '200px',
                        width: '200px'
                    }, 
                    {    // options parameter 
                        duration: 5000,
                        complete: function () {
                            $(this).animate({
                                height: '100px',
                                width: '100px'
                            }, 5000,
                            function () {
                                $('#msgDiv').text('Animation completed..');
                            });
                        },
                        start: function () {
                            $('#msgDiv').append('starting animation..');
                        }
                    });
<div id="msgDiv"></div>
<div id="myDiv" class="redDiv">
</div>

jQuery queue() 方法

jQuery queue() 方法顯示或操作要在指定元素上執(zhí)行的特效函數(shù)的隊(duì)列。

句法：

$('選擇器表達(dá)式').queue();

$('#myDiv').toggle(500);
$('#myDiv').fadeOut(500);
$('#myDiv').fadeIn(500);
$('#myDiv').slideDown(500);
$('#msgDiv').append('Animation functions: ' + $('#myDiv').queue().length);
<div id="msgDiv"></div>
<div id="myDiv" class="redDiv">
</div>

jQuery fadeIn() 方法

jQuery fadeIn() 方法通過(guò)將指定元素淡化為不透明來(lái)顯示它們。

句法：

$('選擇器表達(dá)式').fadeIn(speed, easing, callback);

$('#myDiv').fadeIn(5000, function () {
            $('#msgDiv').append('fadeIn() completed.')
        });

<div id="myDiv" class="redDiv">
</div>
<div id="msgDiv"></div>

jQuery fadeOut() 方法

jQuery fadeOut() 方法通過(guò)將指定元素淡化為透明來(lái)隱藏它們。

句法：

$('選擇器表達(dá)式').fadeOut(speed, easing, callback);

$('#div1').fadeOut(5000, function () {
            $('#msgDiv').append('fadeOut() completed.')
        });
<div id="msgDiv"></div>
<div id="myDiv" class="redDiv">
</div>

jQuery hide() 和 show() 方法

jQuery hide() 方法隱藏和 show() 方法顯示指定的元素。您可以指定將在隱藏/顯示完成時(shí)執(zhí)行的速度、緩動(dòng)和回調(diào)函數(shù)。

句法：

$('選擇器表達(dá)式').hide(速度、緩動(dòng)、回調(diào));
$('選擇器表達(dá)式').show(速度、緩動(dòng)、回調(diào));

$('#div1').hide(500, function () {
                    $('#msgDiv').append('Red div is hidden.')
                });
$('#div2').hide(500, function () {
                    $('#msgDiv').append('Yellow div is hidden.')
                });
<div id="div1" class="redDiv">
</div>
<div id="div2" class="yellowDiv">
</div>

jQuery toggle() 方法

jQuery toggle() 方法隱藏或顯示指定的元素。

句法：

$('選擇器表達(dá)式').toggle(速度、緩動(dòng)、回調(diào))

$('#myDiv').toggle(500, function () {
        $('#msgDiv').append('fadeOut completed.')
    });
<div id="myDiv" class="redDiv">
</div>