jQuery滑入滑出动画

html文件:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>滑入滑出动画</title>
  <style>
    div {
      width: 400px;
      height: 400px;
      background-color: pink;
      display: none;
    }
  </style>
</head>
<body>
<input type="button" value="显示">
<input type="button" value="隐藏">
<input type="button" value="切换">
<div></div>
<script src="jquery-1.12.4.js"></script>
<script>
  $(function(){
      //滑入(slideDown)  滑出:slideUp
    $("input").eq(0).click(function(){
      //slideDown:如果不传参数,有一个默认值normal
      $("div").slideDown(1000);
      console.log("1111");
    });
    $("input").eq(1).click(function(){
      $("div").slideUp();
    });
      $("input").eq(2).click(function(){
      $("div").slideToggle();
    })
  });
</script>
</body>
</html>

  

猜你喜欢

转载自www.cnblogs.com/luwn/p/12732449.html