JQuery学习笔记（4）动画方法

最新推荐文章于 2025-02-25 09:51:17 发布

朱海涛的博客

最新推荐文章于 2025-02-25 09:51:17 发布

阅读量126

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery

本文链接：https://blog.youkuaiyun.com/qq_40770950/article/details/85223709

jQuery 专栏收录该内容

5 篇文章

订阅专栏

本文深入讲解了jQuery中动画效果的实现方法，包括hover(), show(), hide(), toggle(), fadeOut(), fadeIn(), slideToggle(), animate()等函数的使用技巧，以及如何通过参数控制动画的持续时间、缓冲函数和回调函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1首先 hover() 对应鼠标移入移除 show() hide() ==> toggle()

fadeOut([duration],easing,[callback])
fadeOut([duration],easing)
fadeIn([duration],easing,[callback])
浅入浅出操作
duration 持续时间毫秒为单位 slow fast normal
easing 缓冲函数
callback 回调函数

slideToggle([duration],easing,[callback])
slideToggle([duration],easing)
参数同上

控制淡入淡出度：
fadeTo([duration],opacity,[callback])
fadeTo([duration],opacity,[easing],[callback])
opacity:是一个0到1的数字，表示透明度
easing: 是一个字符串，用来表示使用哪个缓冲函数来过渡
方法能够把所有匹配的元素的不透明度以渐进方式调整到指定的不透明度

fadeToggle([duration],easing,[callback])
fadeToggle([duration],easing)

核心方法：animate(properties, [duration],[essing],[callback])
animate(properties,options)
properties：表示一组CSS属性，动画将朝着这组属性移动
easing:定义要是使用的擦除效果的名称，但是需要插件支持，默认的JQuery 提供linear swing
options：表示一组包含动画选项的值得集合

自定义动画省略
停止动画:stop() 关闭动画 JQuery.fx.off=true; 即关闭当前页面中所有的Jquery

demo:

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>模拟show方法</title>
       <script type="text/javascript" src="../jquery-3.3.1.js" ></script>
       <script>
           $(function(){
               $("img").hide();
               $("button").click(function(){
                   $("img").animate({
                       height:'show',
                       width:'show',
                       opacity:'show'
                   },"show");
               });
           })
       </script>
   </head>
   <body>
       <button>显示</button>
       <img src="../img/t0159bbb9ee56b4c725.jpg" />
       <strong>这里CSS参数中简写的show将高度，宽度等恢复到它们被隐藏之前的值</strong>
   </body>
</html>

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script src="../jquery-3.3.1.js"></script>
       <script>
           $(function(){
               $("button").click(function(){
                   $(this).parent().slideUp("slow",function(){
                       $("#info").text($(this).text()+"已经实现。");
                   })
               });
           })
       </script>
   </head>
   <body>
       <div>
           <button>隐藏文本域1</button>
           <input type="text" value="文本域1"/>
       </div>

       <div>
           <button>隐藏文本域2</button>
           <input type="text" value="文本域2"/>
       </div>
       <div id="info"></div>
   </body>
</html>

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" src="../jquery-3.3.1.js" ></script>
       <script>
           $(function(){
               $("input").click(function(){
                   $("img").fadeTo("2000",0.5,"swing",function(){
                       alert("回调函数");
                   });
               });
           })
       </script>
   </head>
   <body>
       <input type="button" value="控制淡入淡出度">
       <img src="../img/t0159bbb9ee56b4c725.jpg" />
   </body>
</html>