动画

animate()方法

作用：用于创建自定义动画

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

参数 params：必需值。定义形成动画的CSS属性

例.

<script> 
$(document).ready(function(){
    
  $("button").click(function(){
    
    $("div").animate({left:'200px'});
  });
});
</script> 

<button>开始动画</button><br><br>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

注：默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute

animate()–操作多个属性

使用animate()方法生成动画的过程中可同时使用多个属性

注：几乎可以使用animate()方法操作所有CSS属性，但属性名必须使用“驼峰命名法”，如应使用paddingLeft而不是padding-left

例.

<script> 
$(document).ready(function(){
    
  $("button").click(function(){
    
    $("div").animate({
      left:'250px',
      opacity:'0.5',
      height:'150px',
      width:'150px'
    });
  });
});

<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:100px;position