jQuery特效代码示例

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>