jQuery animate()小结

最新推荐文章于 2024-07-14 01:24:09 发布

鹿目达也

最新推荐文章于 2024-07-14 01:24:09 发布

阅读量748

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/t1753867136/article/details/80475659

版权

JS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({      left:'250px',
      opacity:'0.5',
      height:'150px',
      width:'150px'},5000,"linear"); 
           //{left:'250px'}动画效果 往右边移动250PX；可以有多个
           //5000动画时间 以毫秒为单位 也可以是 slow 使用字符串时需要加双引号
           //linear动画效果 这个一般不写 现在是开始和结束比较慢 中间快

	$("div").animate({left:'0px'},"slow");   
  });
});
</script> 
</head>
 
<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>