jquery中的各种动画效果

最新推荐文章于 2024-05-16 10:00:15 发布

小龙爷ღ

最新推荐文章于 2024-05-16 10:00:15 发布

阅读量435

点赞数 3

分类专栏： JQuery 文章标签： jquery jquery的动画效果

本文链接：https://blog.csdn.net/qq_45086879/article/details/100060888

版权

JQuery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

注：

所有的动画效果都可以指定3种速度参数："slow"、 "normal" 、"fast"（时间长度分别为0.6秒、0.4秒和0.2秒）

使用速度关键字时要加引号，如果用数字作为时间参数时不需要加引号，如show（1000）

callback回调函数适用于jquery所有的动画效果方法

一、显示与隐藏：show()和hide()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画效果之显示与隐藏</title>
    <script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
  <h>鼠标移动显示与隐藏下面的文字</h>
  <ul style="display: none">
      <li>鞋子</li>
      <li>衣服</li>
      <li>裤子</li>
      <li>手表</li>
      <li>电脑</li>
  </ul>
<script>
    $(function () {
        $("h").hover(function () {
            $(this).next().show(1000);    //使元素在1000毫秒内显示出来
        },function () {
            $(this).next().hide(1000);    //使元素在1000毫秒内隐藏
        })
    });
</script>
</body>
</html>

注：

toggle()方法代替show()与hide()方法

切换元素的可见状态。如果元素可见，则切换为隐藏的；如果元素隐藏，则切换为可见的

<script>
    $(function () {
        $("h").hover(function () {
            $(this).next().toggle(1000);   
        })
    });
</script>

二、元素淡化效果：fadeIn()方法在指定一段时间内升高元素的不透明度，直到元素完全显示出来

fadeOut()方法在指定一段时间内降低元素的不透明度，直到元素完全消失

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画效果之淡入淡出</title>
    <script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
  <h>鼠标移动显示与隐藏下面的文字</h>
  <ul style="display: none">
      <li>鞋子</li>
      <li>衣服</li>
      <li>裤子</li>
      <li>手表</li>
      <li>电脑</li>
  </ul>
<script>
    $(function () {
        $("h").hover(function () {
            $(this).next().fadeIn(1000);   //元素在1000毫秒内显现
        },function () {
            $(this).next().fadeOut(1000);  //元素在1000毫秒内消失
        })
    });
</script>
</body>
</html>

注：

fadeToggle()方法代替fadeIn()和fadeOut()方法

通过不透明度变化来切换匹配元素的可见性

<script>
    $(function () {
        $("h").hover(function () {
            $(this).next().fadeToggle(1000);  
        })
    });
</script>

三、内容向下展开与向上隐藏：slideDown()与slideUp方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画效果之内容向下展开与向上隐藏</title>
    <script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
  <h>鼠标移动显示与隐藏下面的文字</h>
  <ul style="display: none">
      <li>鞋子</li>
      <li>衣服</li>
      <li>裤子</li>
      <li>手表</li>
      <li>电脑</li>
  </ul>
<script>
    $(function () {
        $("h").hover(function () {
            $(this).next().slideDown("slow");   //元素动画效果的速度参数为slow，切记要加引号
        },function () {
            $(this).next().slideUp("slow");
        })
    });
</script>
</body>
</html>

注：

slideToggle()方法代替slideDowm()与slideUp()方法

通过高度变化来切换匹配元素的可见性

<script>
    $(function () {
        $("h").hover(function () {
            $(this).next().slideToggle("slow");   
        })
    });
</script>

四、自定义动画效果：animate(params，speed，callback)方法

切记要给元素样式加上position：relative/absolute ，才能影响元素的left、right、top、botton

params：一个包含样式属性及值得映射{property1:"value1",property2:"value2"}

speed：速度参数，可选；

callback：动画完成时执行的函数，可选；

1.移动效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画效果之自定义动画</title>
    <style type="text/css">
        #demo {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: hotpink;
        }
    </style>
    <script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="demo">
    <p>这是一个盒子</p>
</div>
<script>
    $(function () {
        $("#demo").click(function () {
            $(this).animate({left:"500px"},3000);  //只能点击一次
        });
    });
</script>
</body>
</html>

2.累加、累减动画：在上一个代码中设置的500px之前加上“+=”或者“-=”表示在当前位置累加或累减

<script>
    $(function () {
        $("#demo").click(function () {
            $(this).animate({left:"+=100px"},1000);   //可连续点击，每次点击在当前位置累加100px
        });
    });
</script>

3.多重动画：

（1）同时执行多个动画

<script>
    $(function () {
        $("#demo").click(function () {
            $(this).animate({left:"100px",height:"150px"},1000);  //改变位置的同时还改变高度
        });
    });
</script>

（2）按顺序执行多个动画

<script>
    $(function () {
        $("#demo").click(function () {              
            //第一种写法
            $(this).animate({left:"100px"},1000);
            $(this).animate({height:"150px"},1000);   //先向右移动100px，再高度变化
            //第二种链式写法：同一个jquery对象
            $(this).animate({left:"100px"},1000)
                   .animate({height:"150px"},1000);
        });
    });
</script>

五、动画回调函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画效果之自定义动画</title>
    <style type="text/css">
        #demo {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: hotpink;
        }
    </style>
    <script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="demo">
    <p>这是一个盒子</p>
</div>
<script>
    $(function () {
        $("#demo").click(function () {
            // $(this).animate({left: "100px"}, 1000)
            //     .animate({height: "150px"}, 1000)
            //     .fadeOut("slow");
            $(this).animate({left: "100px"}, 1000)                     
                .animate({height: "150px"}, 1000, function () {
                    $(this).css("border","5px solid blue");    //回调函数改变样式，不能像上面注释一样，否则css立即执行
                })
        });
    });
</script>
</body>
</html>

小龙爷ღ

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
jquery中的各种动画效果

注：所有的动画效果都可以指定3种速度参数："slow"、"normal" 、"fast"（时间长度分别为0.6秒、0.4秒和0.2秒）使用速度关键字时要加引号，如果用数字作为时间参数时不需要加引号，如show（1000）callback回调函数适用于jquery所有的动画效果方法一、显示与隐藏：show()和hide()<!DOCTYPE html><h...
复制链接

扫一扫