jQuery动画效果

最新推荐文章于 2022-10-18 18:27:49 发布

大海知天空

最新推荐文章于 2022-10-18 18:27:49 发布

阅读量89

点赞数

本文链接：https://blog.csdn.net/weixin_42044486/article/details/84191506

版权

1.隐藏、显示和切换

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

$(selector).toggle(speed,callback);

可选的speed参数规定隐藏、显示和切换的速度，可以取slow、fast或毫秒数，可选的callback参数时隐藏或显示完成后所执行的函数名称。

<!DOCTYPE html>
<html lang="zh">
<head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <title>Document</title>
   <script src="js/jquery-3.2.1.js"></script>
   <script>
       $(document).ready(function(){
           $("#dog").click(function(){
              $("div").hide(2000,yichang());
           });
           $("#li").click(function(){
              $("div").show(2000);
           });
           $(".ha").click(function(){
              $("div").toggle(2000);
           });
           function yichang(){
              alert("隐藏了！！");
           }
       });
   </script>
</head>
<body>
<p id="dog">点击我隐藏</p>
<p id="li">隐藏后点击我显示</p>
<p class="ha">第一次点击我隐藏，再点击我就显示</p>
   <div id="dog" style="border:1px solid blue">我么和hi和Gigii给Joe给Joe国家工会宫嗯化工i和</div>
</body>
</html>

未点击时：

点击点击我隐藏：

隐藏后点击隐藏后点击我显示：

2.谈入、谈出和切换

$(selector).fadeIn(speed,callbakd); //淡入

$(selector).fadeOut(speed,callbakd); //淡出

$(selector).fadeToggle(speed,callbakd); //在淡入和淡出之间切换

<!DOCTYPE html>
<html lang="zh">
<head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <title>Document</title>
   <script src="js/jquery-3.2.1.js"></script>
   <script>
       $(document).ready(function(){
           $("#lit").click(function(){
               $("#btn").fadeToggle(2000);
               $("#dog").fadeToggle("slow");
           });
       });
   </script>
</head>
<body>
   <p id="lit">谈入和谈出切换</p>
   <div id="btn" style="border: 1px solid blue;width: 100px;height: 100px;">485748</div><br/><br/>
   <div id="dog" style="border: 1px solid yellow;width: 100px;height: 100px;"></div>
</body>
</html>

未点击时：

点击后：

再次点击：

3.向下滑动、向上滑动和切换

$(selector).slideDown(speed,callback); //向下滑动

$(selector).slideUp(speed,callback); //向上滑动

$(selector).slideToggle(speed,callback); //在向下滑动和向上滑动间转换

<!DOCTYPE html>
<html lang="zh">
<head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <title>Document</title>
   <script src="js/jquery-3.2.1.js"></script>
   <script>
       $(document).ready(function(){
       $(".he").click(function(){
           $("#dogg").slideToggle(6000);
       });
       });
   </script>
</head>
<body>
   <div class="he">点我试试</div>
   <div id="dogg">
   <p>我见过i奇偶i结果i结构更加欧工i恶狗i奇偶jog jog弄哦i内哦让</p>
      <p>我见过i奇偶i结果i结构更加欧工i恶狗i奇偶jog jog弄哦i内哦让</p>
      <p>我见过i奇偶i结果i结构更加欧工i恶狗i奇偶jog jog弄哦i内哦让</p>
   <div/>
</body>
</html>

未点击时：

点击：

向上滑动后再次点击：

大海知天空

关注

0
点赞
踩
0

收藏

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

1.隐藏、显示和切换$(selector).hide(speed,callback);$(selector).show(speed,callback);$(selector).toggle(speed,callback);可选的speed参数规定隐藏、显示和切换的速度，可以取slow、fast或毫秒数，可选的callback参数时隐藏或显示完成后所执行的函数名称。&lt;!DO...
复制链接

扫一扫