jQuery的动画
程序员文章站
2022-03-16 18:58:52
...
这仅仅是自己的学习笔记，只为记录自己的成长。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery动画</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#button1").click(function(){
$("div").animate({ left: "250px",
width: '+=150px',
height: '150px',
opacity: '0.5'},"slow")
});
$("#button2").click(function(){
$("div").animate({ height: 'toggle'},"slow")
});
$("#button3").click(function(){
$("div").animate({ height: '300px', opacity: '0.4'},"slow")
$("div").animate({ width: '300px', opacity: '0.8'},"slow")
$("div").animate({ height: '100px', opacity: '0.4'},"slow")
$("div").animate({ width: '100px', opacity: '0.8'},"slow")
});
$("#button4").click(function(){
$("div").animate({ left: '100px'},"slow")
$("div").animate({ fontSize: '3em'},"slow")
})
})
</script>
</head>
<body>
<button id="button1">开始动画1</button>
<button id="button2">开始动画2</button>
<button id="button3">开始动画3</button>
<button id="button4">开始动画4</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
Hello,World;
</div>
123456
</body>
</html>