animate方法使用总结

<!DOCTYPE html>
<html lang="en" class="loading">
<head>
    <meta charset="UTF-8">
    <title>animate方法</title>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script>
        $(function(){
          /*  show()方法和hide()方法会同时修改元素的多个样式属性，即高度、宽度和不透明度:
              fadcOut()方法和fadeln()方法只会修改元素的不透明度:
              slideDown()方法和slideUp()方法只会改变元素的高度.
              animate方法的标准格式:要使用此方式的前提是被操作的元素必须有position属性，否则没效果
              animate(params, speed,callback);
           */
           $(".panel").click(function(){
               //点击元素后在1秒内向右移动300px的同时元素高度增加到200px，不刷新页面的情况下再次点击元素不会再移动
               $(this).animate({left:"300px",height:"200px"},1000);
               //不刷新页面的前提下，再次点击元素时在上一次位置的基础上向右移动300px，不是向左
               //$(this).animate({left:"+=300px"},1000);
           });
        });
    </script>
    </head>
<body>
    <div class="panel" style="width: 100px; height: 100px;margin: 100px; background: #647787; position: relative;" ></div>
</body>
</html>
posted on 2018-10-19 16:18 小虾米吖~ 阅读(922) 评论(0) 编辑收藏举报