jQuery三类切换动画效果

最新推荐文章于 2020-09-28 11:13:42 发布

饲养员的小仙女

最新推荐文章于 2020-09-28 11:13:42 发布

阅读量1k

点赞数

文章标签： jQuery动画

本文链接：https://blog.csdn.net/weixin_43661426/article/details/84892665

版权

jQuery三类切换动画效果

一.显示/隐藏/来回切换----show/hide/toggle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.11.1.js"></script>
    <style>
        .box{
            width:100px;
            height:100px;
            background:red;
        }
    </style>
</head>
<body>
<input type="button" id="hide" value="隐藏">
<input type="button" id="show" value="显示">
<input type="button" id="toggle" value="显示/隐藏切换">
<div class="box"></div>
<script>
  //隐藏
  $("#hide").on("click",function (e) {
      $(".box").hide(1000)
  });
  //显示
  $("#show").on("click",function (e) {
      $(".box").show(1000)
  });
  //来回切换
   $("#toggle").on("click",function (e) {
       $(".box").toggle(1000)
   })
</script>
</body>
</html>

二.向上滑动/向下滑动/来回切换–slideUp/slideDown/slideToggle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.11.1.js"></script>
    <style>
        .box{
            width:200px;
            height:200px;
            background:red;
        }
    </style>
</head>
<body>
<input type="button" id="slideUp" value="向上滑动">
<input type="button" id="slideDown" value="向下滑动">
<input type="button" id="slideToggle" value="向上/向下切换">
<p class="box"></p>
<script>
  //向上滑动
  $("#slideUp").on("click",function (e) {
      $(".box").slideUp(1000)
  });
  //向下滑动
  $("#slideDown").on("click",function (e) {
      $(".box").slideDown(1000)
  });
  //向上/向下切换
   $("#slideToggle").on("click",function (e) {
       $(".box").slideToggle(1000)
   })
</script>
</body>
</html>

三.淡入/淡出/透明切换—fadeIn/fadeOut/fadeTo(time, opacity)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.11.1.js"></script>
    <style>
        .box{
            width:200px;
            height:200px;
            background:red;
        }
    </style>
</head>
<body>
<input type="button" id="fadeIn" value="淡入">
<input type="button" id="fadeOut" value="淡出">
<input type="button" id="fadeToggle" value="淡入/淡出切换">
<input type="button" id="fadeTo" value="透明切换">
<p class="box"></p>
<script>
  //淡入
  $("#fadeIn").on("click",function (e) {
      $(".box").fadeIn(1000)
  });
  //淡出
  $("#fadeOut").on("click",function (e) {
      $(".box").fadeOut(1000)
  });
  //淡入/淡出切换
   $("#fadeToggle").on("click",function (e) {
       $(".box").fadeToggle(1000)
   })
   //透明切换
  $("#fadeTo").on("click",function (e) {
      $(".box").fadeTo(1000,0.3)//即使时间是0，也要把0写上
  })
</script>
</body>
</html>

饲养员的小仙女

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery三类切换动画效果

jQuery三类切换动画效果一.显示/隐藏/来回切换----show/hide/toggle&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;
复制链接

扫一扫