JavaScript中的动画效果

最新推荐文章于 2024-08-31 23:42:40 发布

alwaysPractice

最新推荐文章于 2024-08-31 23:42:40 发布

阅读量2.2w

点赞数

分类专栏： web前端文章标签： JavaScript的动画效果

本文链接：https://blog.csdn.net/jjjndk1314/article/details/79700985

版权

web前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1.滑动效果，函数均有一个参数设置动作持续时间
show（times）：显示
hide（times）：隐藏
toggle（times）：翻转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="jquery-3.1.1.js"></script>
    <title>Title</title>
</head>
<body>
<div>hello</div>

<button onclick="f1()">显示</button>
<button onclick="f2()">隐藏</button>
<button onclick="f3()">切换</button>
<script>

    function f1() {
      $("div").show(1000,function () {
          // alert("show")
      })
    }

  function f2() {
      $("div").hide(1000,function () {
          // alert(1243)
      })
    }

     function f3() {
      $("div").toggle(1000)
    }
</script>

</body>
</html>

2.收缩效果
slideDown(times):出现(指定延迟时间)
slideUp（times）：隐藏
slideToggle（times）：翻转小姑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.1.1.js"></script>
    <script>
    $(document).ready(function(){
     $("#slideDown").click(function(){
         $("#content").slideDown(1000);
     });
      $("#slideUp").click(function(){
         $("#content").slideUp(1000);
     });
      $("#slideToggle").click(function(){
         $("#content").slideToggle(1000);
     })
  });
    </script>
    <style>

        #content{
            text-align: center;
            background-color: lightblue;
            border:solid 1px red;
            /*display: none;*/
            padding: 50px;
        }
    </style>
</head>
<body>

    <div id="slideDown">出现</div>
    <div id="slideUp">隐藏</div>
    <div id="slideToggle">toggle</div>

    <div id="content">hello world</div>

</body>
</html>

3.淡入淡出效果
fadeIn（times）：淡入
fadeOut（times）：淡出
fadeToggle（times）：翻转
fadeTo（times，op）,第一个参数设定时间，第二个参数指定淡出截止透明度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.1.1.js"></script>
    <script>
    $(document).ready(function(){
   $("#in").click(function(){
       $("#id1").fadeIn(2000);


   });
    $("#out").click(function(){
       $("#id1").fadeOut(2000);

   });

    $("#toggle").click(function(){
       $("#id1").fadeToggle(2000);


   });
    $("#fadeto").click(function(){
       $("#id1").fadeTo(1000,1);

   });
});



    </script>

</head>
<body>
      <button id="in">fadein</button>
      <button id="out">fadeout</button>
      <button id="toggle">fadetoggle</button>
      <button id="fadeto">fadeto</button>

      <div id="id1" style="width: 80px;height: 80px;background-color: blueviolet"></div>

</body>
</html>