版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/dyw_666666/article/details/82751005
例一：方块逐渐变小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div style="width:400px;height:400px;background:blue;"></div>
</body>
<script src="jquery.js"></script>
<script>
// 方块逐渐变小的动画效果
$('div').click(function(){
$(this).hide(2000 , function(){alert('结束了')});
});
</script>
</html>例二：图片逐渐消失，又逐渐出现的动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div><img src="../JS/boom.png" alt=""></div>
</body>
<script src="jquery.js"></script>
<script>
$('div').click(function(){
// 图片逐渐消失，又逐渐出现的动画效果
$(this).slideUp(2000).delay(2000).slideDown(2000);
});
</script>
</html>例三：图片点击消失、图片点击浮现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div><img src="../JS/boom.png" alt=""></div>
</body>
<script src="jquery.js"></script>
<script>
// 图片点击消失、图片点击显现
$('img').click(function(){
$(this).fadeOut(2000).delay(2000).fadeIn(2000);
});
</script>
</html>例四： 向右移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div style="width:150px;height:100px;background:blue;"></div>
</body>
<script src="jquery.js"></script>
<script>
// 向右移动的动画效果
$('div').click(function(){
var params = {'marginLeft':'100px','backgroundColor':'#00FF00'};
$(this).animate(params,1000);
});
</script>
</html>