JQuery应用实例学习 —— 26 简单的动画效果

最新推荐文章于 2022-10-29 18:38:32 发布

烟敛寒林o

最新推荐文章于 2022-10-29 18:38:32 发布

阅读量174

点赞数

分类专栏： # ——【 JQuery】

本文链接：https://blog.csdn.net/dyw_666666/article/details/82751005

版权

——【 JQuery】专栏收录该内容

29 篇文章 0 订阅

订阅专栏

例一：方块逐渐变小

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