jQuery笔记——动画设计——滑动动画

最新推荐文章于 2024-09-24 09:00:00 发布

原创最新推荐文章于 2024-09-24 09:00:00 发布 · 587 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #动画 #设计

这篇博客详细介绍了jQuery中的滑动动画效果，包括向下滑动(slideDown)、向上滑动(slideUp)以及显隐切换滑动(slideToggle)。每个方法的参数、持续时间、缓冲函数及回调函数的使用都进行了详细阐述，强调了这些方法如何通过改变元素高度来实现动画，并指出了它们在隐藏和显示元素时的应用场景。

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

一、显隐滑动效果

向下滑动：slideDown

slideDown([duration] , [callback])

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

向上滑动：slideUp

slideUp([duration] , [callback])

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

参数解释：

duration：一个字符串或数字，用来定义动画将运行多久

easing：一个用来表示使用哪个缓冲函数来过渡的字符串

callback：动画完成时执行的函数

slideDown和slideUp：

通过改变高度的值来实现；高度为0时，display将会被设为none，以确保该元素不会影响页面布局。

持续时间以毫秒为单位，数值越大，动画越慢；fast ：200ms ，slow：600；如果提供任何其他字符串，或者这个duration参数被忽略，默认使用400ms。

这个回调函数不设置任何参数，但是this是存在动画的DOM元素，如果多个元素一起做动画效果，每执行一次回调匹配的元素，而不是作为一个整体动画的一次。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>显隐滑动效果</title>
    <script src="js/jquery2.1.3.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $("button").click(function(){
                $(this).parent().slideUp("slow",function(){
                    $("#msg").text($("button",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>
    <button>隐藏文本框3</button>
    <input type="text" value="文本框3"/>
</div>
<div id="msg"></div>
</body>
</html>

注意：slideDown（）作用于隐藏元素

slideUp（）作用于显示元素

二、显隐切换滑动

在滑动中切换显示或隐藏元素：slideToggle()

slideToggle([duration] , [callback])

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

参数解释：

duration：一个字符串或数字，用来定义动画将运行多久

easing：一个用来表示使用哪个缓冲函数来过渡的字符串

callback：动画完成时执行的函数

slideToggle：

通过改变高度的值来实现；高度为0时，display将会被设为none，以确保该元素不会影响页面布局。display属性将会被存储并且需要的时候可以恢复。

持续时间以毫秒为单位，数值越大，动画越慢；fast ：200ms ，slow：600；

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>显隐切换滑动</title>
    <script src="js/jquery2.1.3.min.js"></script>
    <script type="text/javascript">
        $(function(){
           $("#aa").click(function(){
               $("div:not(.still)").slideToggle("slow",function(){
                   var n = parseInt($("span").text(),10);                     //将span中的数用十进制来解析
                   $("span").text(n+1);                                       //每调用一次就执行依次n+1，注意并不是整体动作完成一次加一。而是单个DOM对象切换一次就加一
               })
           }) ;
        });
    </script>
    <style type="text/css">
        div{background: #b977d1;margin: 3px;width: 60px;height: 60px;float: left;}
        div still{background: #345;width: 5px;}
        div.hider{display: none;}
        span{color: red;}
        p{clear: left;}
    </style>
</head>
<body>
<div></div>
<div class="still"></div>
<div style="display: none;"></div>
<div class="still"></div>
<div></div>
<div class="still"></div>
<div class="hider"></div>
<div class="still"></div>
<div class="hider"></div>
<div class="still"></div>
<div></div>
<p>
    <button id="aa">滑动切换</button>
    共计滑动切换<span>0</span>个div元素。
</p>
</body>
</html>