1. 教程
  2. jQuery 教程
  3. jQuery 动画效果

jQuery 动画效果

Created: October-14, 2018

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

jQuery animate() 方法

jQuery animate() 方法用于创建自定义动画。该 animate() 方法通常用于动态数字 CSS 特性，例如 width、height、margin、padding、opacity、top 和 left 等，但非数字性质，例如 color 或 background-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 属性的元素为 position、relative、fixed 或 absolute 来操纵或动画的位置。

一次动画多个属性

你还可以使用该 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>