jqury如何一次性实现连贯的一系列不同动作？

最新推荐文章于 2024-04-22 15:43:49 发布

weixin_30265103

最新推荐文章于 2024-04-22 15:43:49 发布

阅读量109

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lxl87/p/8321946.html

版权

1.用animate();动画队列；

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    var div=$("div");
    div.animate({height:'300px',opacity:'0.4'},"slow");//动作1
    div.animate({width:'300px',opacity:'0.8'},"slow");//动作2
    div.animate({height:'100px',opacity:'0.4'},"slow");//动作3
    div.animate({width:'100px',opacity:'0.8'},"slow");//动作4
  });//执行动作的先后顺序按照从上往下的规律
});
</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>

2.用jquery中的链；

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function()
  {
  $("button").click(function(){
    $("#p1").css("color","red")
      .slideUp(2000)
      .slideDown(2000);//执行的顺序按照点之前到点之后
  });
});
</script>
</head>
<body>

<p id="p1">菜鸟教程!!</p>
<button>点我</button>

</body>
</html>

转载于:https://www.cnblogs.com/lxl87/p/8321946.html

weixin_30265103

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jqury如何一次性实现连贯的一系列不同动作？

1.用animate();动画队列；<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script&g...
复制链接

扫一扫