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效果参考手册