JQ 简单动画显示隐藏效果

一、概括

jq的显示隐藏动画总共有：

普通显示隐藏效果主要用了hide、show、toggle

淡入淡出主要用到了fadeIn、fadeOut、fadeToggle

滑动效果主要用了slideDown、slideUp、slideToggle

其中各效果用到的toggle都是其他两个属性的切换

二、实例

普通显示隐藏效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.4.min.js"></script>
    <script>

$(document).ready(function() {
    $("#hide").click(function () {
        $("p").hide(1000);
    });
    $("#show").click(function () {
        $("p").show(1000);
    });

//用于切换被选元素的 hide() 与 show() 方法。
    $("#toggle").click(function () {
        $("p").toggle();
    });
})

    </script>
    <link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>


    <p>hello</p>
    <button >隐藏</button>
    <button >显示</button>
    <button >切换</button>

</body>
</html>

淡入淡出效果：

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


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

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


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

   });
});



    </script>

</head>
<body>
      <button >fadein</button>
      <button >fadeout</button>
      <button >fadetoggle</button>
      <button >fadeto</button>

      <div ></div>

</body>
</html>

滑动效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.4.min.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 >出现</div>
    <div >隐藏</div>
    <div >toggle</div>

    <div >helloworld</div>

</body>
</html>

JQ 简单动画显示隐藏效果

相关推荐