jQuery animate() 操作动画

最新推荐文章于 2024-07-14 01:24:09 发布

蝴蝶教程

最新推荐文章于 2024-07-14 01:24:09 发布

阅读量542

点赞数

分类专栏： jQuey

jQuey 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

jQuery animate() 方法

jQuery animate()方法用于创建自定义动画。

以下示例演示了animate()方法的简单用法; 它将<div>元素向右移动，直到它达到250px的left属性：

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>jq</title>
<head>
  //此版本是百度cdn 1.11.1，当然你可以使用更高的版本，从2.0版本以上的是不支持ie6-8的
  <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
        $("button").click(function(){
          $("div").animate({left: '250px'});
        });
    });
  </script>
</head>
<body>
  <button>开始动画</button>
  <p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
  如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
  <div style="background:#009688;height:100px;width:100px;position:absolute;">
  </div>
</body>

</html>

语法：$(selector).animate({params},speed,callback);

必选的params参数定义要设置动画的CSS属性。

可选的speed参数指定效果的持续时间。它可以采用以下值："slow", "fast"或者毫秒。

可选的回调参数是动画完成后要执行的函数。

注意：默认情况下，所有HTML元素都具有静态位置，并且无法移动。要操纵位置，请记住首先将元素的CSS position属性设置为relative，fixed或absolute！

jQuery animate() 操作多个属性

以下示例演示了animate()可以同时为多个属性设置动画：

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>jq</title>
<head>
    //此版本是百度cdn 1.11.1，当然你可以使用更高的版本，从2.0版本以上的是不支持ie6-8的
  <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js">
  <script>
    $(document).ready(function(){
       $("button").click(function(){
          $("div").animate({
            left: '250px',
            opacity: '0.5',
            height: '150px',
            width: '150px'
          });
        }); 
    });
  </script>
</head>
<body>
  <button>开始动画</button>
  <p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
  如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
  <div style="background:#009688;height:100px;width:100px;position:absolute;">
  </div>
</body>

</html>

是否可以使用animate()方法操作所有CSS属性？

是的，差不多！但是，有一件重要的事情需要记住：当与animate()方法一起使用时，所有属性名称必须是驼峰式的：您需要编写paddingLeft而不是padding-left，marginRight而不是margin-right，依此类推。

jQuery animate() 使用相对值

也可以定义相对值（该值相对于元素的当前值）。这是通过在值前加上+ =或 - 来完成的：

以下示例演示了animate()方法使用相对值：

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>jq</title>
<head>
    //此版本是百度cdn 1.11.1，当然你可以使用更高的版本，从2.0版本以上的是不支持ie6-8的
  <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js">
  <script>
    $(document).ready(function(){
       $("button").click(function(){
           $("div").animate({
              left: '250px',
              height: '+=150px',
              width: '+=150px'
            });
        }); 
    });
  </script>
</head>
<body>
  <button>开始动画</button>
  <p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
  如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
  <div style="background:#009688;height:100px;width:100px;position:absolute;">
  </div>
</body>

</html>

更多jQuery动画方法