jQuery 动画效果

在本教程中,你将学习如何使用 jQuery 为 CSS 属性设置动画。

jQuery animate() 方法

jQuery animate() 方法用于创建自定义动画。该 animate() 方法通常用于动态数字 CSS 特性,例如 widthheightmarginpaddingopacitytopleft 等,但非数字性质,例如 colorbackground-color 不能使用基本功能的 jQuery 进行动画。

注意: 并非所有 CSS 属性都是可动画的。通常,任何接受数字,长度,百分比或颜色值的 CSS 属性都是可动画的。但是,核心 jQuery 库不支持颜色动画。要使用 jQuery 颜色插件来操作和动画颜色

语法

jQuery animate() 方法的基本语法 :

$(selector).animate({ properties }, duration, callback); 

animate() 方法的参数具有以下含义:

  • required 属性参数定义要设置动画的 CSS 属性
  • 可选的 duration 参数指定动画运行的时间。可以使用预定义的字符串之一 'slow' 或者 'fast' 以毫秒为单位指定持续时间 ; 值越高表示动画越慢。
  • 可选的callback参数是动画完成后调用的函数。

这是一个简单的 jQuery animate() 方法示例,它可以在单击按钮时将图像从其原始位置向右移动 300 像素。

<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("img").animate({
            left: 300
        });
    });
});
</script>

注意: 默认情况下,所有 HTML 元素都具有静态位置。由于静态元素不能移动,所以你必须设置 CSS 属性的元素为 positionrelativefixedabsolute 来操纵或动画的位置。

一次动画多个属性

你还可以使用该 animate() 方法同时为元素的多个属性设置动画。所有属性同时动画,没有任何延迟。

<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({
            width: "300px",
            height: "300px",
            marginLeft: "150px",
            borderWidth: "10px",
            opacity: 0.5
        });
    });
});
</script>

注: CSS 属性名称必须是驼峰式命名法,当与 animate() 方法一起使用时,例如,字体大小应该是 'fontSize' 而不是 'font-size' 。同样的,'marginLeft' 而不是 'margin-left''borderWidth' 而不是 'border-width' 等等。

提示: 在为 border-style 属性设置动画之前,必须设置 border-width 元素的属性。在为边框宽度设置动画之前,元素必须具有边框,因为 border-style 属性的默认值为 none

逐个动画多个属性或动画队列

你还可以使用 jQuery 的链接功能在队列中逐个动画元素的多个属性。我们将在下一章中详细了解链接。

以下示例演示了 jQuery 排队或链接动画,其中每个动画将在元素上的上一个动画完成后启动。

<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $(".box")
            .animate({width: "300px"})
            .animate({height: "300px"})
            .animate({marginLeft: "150px"})
            .animate({borderWidth: "10px"})
            .animate({opacity: 0.5});
    });
});
</script>

使用相对值动画属性

你还可以定义动画属性的相对值。如果使用 +=-= 前缀指定值,则通过从属性的当前值加上或减去给定数量来计算目标值。

<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({            
            top: "+=50px",
            left: "+=50px",
            width: "+=50px",
            height: "+=50px"
        });
    });
});
</script>

使用预定义值动画属性

除了数值,每个属性可以采用的字符串为 'show''hide''toggle' 。当你只想将属性从其当前值设置为初始值并反之亦然时,它将非常有用。

<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({
            width: 'toggle'
        });
    });
});
</script>