jQuery动画--显隐动画及其特效

最新推荐文章于 2024-03-10 18:19:17 发布

努力学习的小蜗牛

最新推荐文章于 2024-03-10 18:19:17 发布

阅读量481

点赞数 1

本文链接：https://blog.csdn.net/weixin_45806273/article/details/106324256

版权

本文深入讲解了jQuery中动画效果的实现方法，包括显示与隐藏、滑动、渐变等常见动画，探讨了动画参数的设置及其对动画效果的影响，如速度、回调函数和缓冲函数的应用。

摘要由CSDN通过智能技术生成

一.动画的显隐

显隐动画

show():显示 hide():隐藏

原理：hide()通过改变元素的高度宽度和不透明度，直到这三个属性值到0
			将匹配元素集合的内联style属性设置为display:none

show()从上到下增加元素的高度，从左到右增加元素宽度，从0到1增加透明度，直至内容完全可见

参数：

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

1) 参数 <duration> 表示一个字符串或者数字，决定动画将运行多久

2) 参数 <callback> 表示在动画完成时执行的函数

3) 参数 <easing> 表示一个用来表示使用哪个缓冲函数来过渡的字符串

显示和隐藏式一对密不可分的动画形式

显隐切换

toggle()方法

切换元素的可见状态

toggle([duration] , [callback])

toggle([duration] , [easing] , [callback]);

toggle(showOrHide)

1) 参数duration表示一个字符串或者数字，决定动画将运行多久

2) 参数callback表示在动画完成时执行的函数

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

4) 参数showOrHide是一个布尔值，指示显示或隐藏元素  true ：show（）；false：hide（）
$('.target').toggle()     立即切换    可恢复

1.有时间参数时，成为动画方法
2.持续时间以毫秒为单位，数值越大，动画越慢 slow：600 fast：200
3.如果提供回调函数参数，回调函数会在动画完成时调用，这对于将不同的动画串联在一起按顺序排列是非常有用的。这个回调函数不设置任何参数，但是this是存在动画的DOM元素，如果多个元素一起做动画效果，值得注意的是，每执行一次回调函数，this就匹配当前元素，而不是作为一个整体的动画一次。

显隐滑动效果

slideDown():滑动隐藏

slidUp():滑动显示

参数:

slideDown(speed,callback)

slidUp(speed,callback)

显隐切换滑动

slideToggle():显隐滑动切换

参数:

slidUp(speed,callback)

显隐渐变

渐变：通过改变不透明度

淡入淡出

fadeIn()

fadeOut()

参数：

fadeIn(speed,callback)

fadeOut(speed,callback)

设置淡出透明效果

fadeTo()⁭：以渐进的方式调整到指定透明度

参数：

fadeTo(speed,opacity,callback)

渐变切换:结合fadeIn和fadeOut

fadeToggle()

参数:

fadeOut(speed,callback)

结合一个实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.11.3.min.js"></script>
    <style>
        #showdiv{
           text-align: center;
        }
    </style>
    <script type="text/javascript">
        function hideFn() {
            // 隐藏
            //默认隐藏
            // $("#showdiv").hide(5000,"linear");
            //滑动隐藏
            // $("#showdiv").slideUp(3000,"swing");
            //淡出
            //$("#showdiv").fadeOut(3000,"swing");
        }
        // 显示
        function showFn() {
            //默认方式
            // $("#showdiv").show(5000,"linear");
            //滑动显示
            // $("#showdiv").slideDown(3000,"swing");
            //淡入淡出
            //$("#showdiv").fadeIn(3000,"swing");
        }

        //替换效果 显示和隐藏
        function toggleFn() {
            //默认方式
            // $("#showdiv").toggle(3000,"swing");
            //滑动显示方式
            // $("#showdiv").slideToggle(3000,"swing");
            //淡入淡出方式
            //$("#showdiv").fadeToggle(3000,"swing",[alert("淡出")]);
        }

    </script>
</head>
<body>
<input type="button" value="点击按钮 隐藏div" onclick="hideFn()"/>
<input type="button" value="点击按钮 显示div" onclick="showFn()"/>
<input type="button" value="点击按钮 显示和隐藏切换" onclick="toggleFn()"/>
<div id="showdiv">
    <img width="550px" height="550px" src="img/1.jpg" alt="">
</div>

</body>
</html>