jQuery animate() 方法

jQuery animate() 方法使用元素的樣式屬性執行自定義動畫。animate() 方法將現有樣式屬性更改為具有運動的指定屬性。

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

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

應用動畫

在下面的示例中，我們正在使用動畫更改元素的高度和寬度。

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

設置動畫持續時間

您可以以毫秒為單位應用動畫持續時間作為 animate() 方法的第二個參數。

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

應用緩動方法

指定一個字符串參數，指示用于過渡的緩動函數。jQuery 庫提供了兩個緩動函數：linear 和 swing。

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

動畫完成時的回調函數

指定動畫完成時要執行的回調函數。

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

指定動畫選項

您可以將各種選項指定為 JSON 對象。選項包括持續時間、緩動、隊列、步驟、進度、完成、開始、完成和始終。

$('#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() 方法顯示或操作要在指定元素上執行的特效函數的隊列。

句法：

$('選擇器表達式').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() 方法通過將指定元素淡化為不透明來顯示它們。

句法：

$('選擇器表達式').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() 方法通過將指定元素淡化為透明來隱藏它們。

句法：

$('選擇器表達式').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() 方法顯示指定的元素。您可以指定將在隱藏/顯示完成時執行的速度、緩動和回調函數。

句法：

$('選擇器表達式').hide(速度、緩動、回調);
$('選擇器表達式').show(速度、緩動、回調);

$('#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() 方法隱藏或顯示指定的元素。

句法：

$('選擇器表達式').toggle(速度、緩動、回調)

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