animate方法使用总结

最新推荐文章于 2022-07-07 14:59:11 发布

weixin_34311757

最新推荐文章于 2022-07-07 14:59:11 发布

阅读量2k

点赞数 1

文章标签： java javascript ViewUI

原文链接：http://www.cnblogs.com/LindaBlog/p/9817123.html

版权

<!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>

转载于:https://www.cnblogs.com/LindaBlog/p/9817123.html

优惠劵

weixin_34311757

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
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"></scrip...
复制链接

扫一扫