上一节:
下一节:

  jQuery 动画

  • jQuery效果 - 动画

    使用jQuery，您可以创建自定义动画。
    jQuery

  • jQuery animate() 方法

    jQuery animate()方法用于创建自定义动画。
    语法：$(selector).animate({params},speed,callback);
    必选的params参数定义要设置动画的CSS属性。
    可选的speed参数指定效果的持续时间。 它可以采用以下值："slow", "fast"或者毫秒。
    可选的回调参数是动画完成后要执行的函数。
    注意：默认情况下，所有HTML元素都具有静态位置，并且无法移动。要操纵位置，请记住首先将元素的CSS position属性设置为relative，fixed或absolute！
    以下示例演示了animate()方法的简单用法; 它将<div>元素向右移动，直到它达到250px的left属性： 
       
           <head>
              <script type="text/javascript" src="jquery.js"></script>
              <script type="text/javascript">
              $("button").click(function(){
                $("div").animate({left: '250px'});
              });
             </script>
           </head>
    尝试一下

  • jQuery animate() 操作多个属性

    是否可以使用animate()方法操作所有CSS属性？
    是的，差不多！ 但是，有一件重要的事情需要记住：当与animate()方法一起使用时，所有属性名称必须是驼峰式的：您需要编写paddingLeft而不是padding-left，marginRight而不是margin-right，依此类推。
    此外，核心jQuery库中不包含颜色动画。
    如果要为颜色设置动画，则需要从jQuery.com下载Color Animations插件。
    以下示例演示了animate()可以同时为多个属性设置动画： 
       
           <head>
              <script type="text/javascript" src="jquery.js"></script>
              <script type="text/javascript">
              $("button").click(function(){
                $("div").animate({
                  left: '250px',
                  opacity: '0.5',
                  height: '150px',
                  width: '150px'
                });
              }); 
             </script>
           </head>
    尝试一下

  • jQuery animate() 使用相对值

    也可以定义相对值（该值相对于元素的当前值）。 这是通过在值前加上+ =或 - 来完成的：
    以下示例演示了animate()方法使用相对值： 
       
           <head>
              <script type="text/javascript" src="jquery.js"></script>
              <script type="text/javascript">
              $("button").click(function(){
                $("div").animate({
                  left: '250px',
                  height: '+=150px',
                  width: '+=150px'
                });
              });
             </script>
           </head>
    尝试一下

  • jQuery animate() 使用预定义的值

    以下示例演示animate()方法指定为“show”，“hide”或“toggle” 
       
         <head>
            <script type="text/javascript" src="jquery.js"></script>
            <script type="text/javascript">
            $("button").click(function(){
              $("div").animate({
                height: 'toggle'
              });
            }); 
           </script>
         </head>
    尝试一下

  • jQuery animate() 使用队列功能

    默认情况下，jQuery带有动画的队列功能。
    这意味着如果你在彼此之后编写多个animate()调用，jQuery会使用这些方法调用创建一个“内部”队列。 然后它运行动画调用ONE by ONE。
    因此，如果您想要在彼此之后执行不同的动画，我们将利用队列功能： 
       
         <head>
            <script type="text/javascript" src="jquery.js"></script>
            <script type="text/javascript">
            $("button").click(function(){
              var div = $("div");
              div.animate({height: '300px', opacity: '0.4'}, "slow");
              div.animate({width: '300px', opacity: '0.8'}, "slow");
              div.animate({height: '100px', opacity: '0.4'}, "slow");
              div.animate({width: '100px', opacity: '0.8'}, "slow");
            });
           </script>
         </head>
    尝试一下
    下面的示例首先将<div>元素向右移动，然后增加文本的字体大小： 
       
         <head>
            <script type="text/javascript" src="jquery.js"></script>
            <script type="text/javascript">
            $("button").click(function(){
              var div = $("div");
              div.animate({left: '100px'}, "slow");
              div.animate({fontSize: '3em'}, "slow");
            });
           </script>
         </head>
    尝试一下
    有关所有jQuery效果的完整概述，请转到我们的jQuery效果参考手册。
上一节:
下一节: