jQuery效果-显示与隐藏效果/滑动效果 / 高亮显示案例

最新推荐文章于 2023-01-08 21:05:42 发布

httpkaidi

最新推荐文章于 2023-01-08 21:05:42 发布

阅读量215

点赞数 1

分类专栏： jQuery 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/httpkaidi/article/details/121621608

版权

jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

jQuery效果
显示与隐藏效果
显示语法规范：
show([speed,[easing],[fn])
显示参数
（1)参数都可以省略，无动画直接显示
（2）speed:三种预定速度之一的字符串（“slow”、“normal"、“fast”)或表示动画时长的毫秒数值(如：1000）
（3）easing：用于指定切换效果，默认是"swing",可用参数"linear"
（4）fn : 回调函数，再动画完成时执行的函数，每元素执行一次
( 其他效果可查看jquery 的 API）

<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                $('div').show("slow", function() {
                    //回调函数 当动画消失弹出对话框
                    alert(0);
                });
            })
            $("button").eq(1).click(function() {
                $('div').hide("slow", function() {
                    //回调函数 当动画消失弹出对话框
                    alert(1);
                });
            })
            $("button").eq(2).click(function() {
                $('div').toggle("slow");
            })
            //一半 情况，不加参数，直接显示和隐藏就可以了
        })
    </script>
</body>

滑动效果
显示语法规范：
slideDown([speed,[easing],[fn])
下拉效果参数
（1)参数都可以省略，无动画直接显示
（2）speed:三种预定速度之一的字符串（“slow”、“normal"、“fast”)或表示动画时长的毫秒数值(如：1000）
（3）easing：用于指定切换效果，默认是"swing",可用参数"linear"
（4）fn : 回调函数，再动画完成时执行的函数，每元素执行一次
( 其他效果可查看jquery 的 API）

          $("button").eq(0).click(function() {
                //下拉滑动
                //首先要把元素 display 设为 none
                $('div').slideDown();
            })
            $("button").eq(1).click(function() {
                //上拉滑动
                $('div').slideUp();
            })
            $("button").eq(2).click(function() {
                //切换滑动
                $('div').slideToggle();
            })

hover(over,out）

(1)over:鼠标移到元素上要触发的函数（相当于mouseenter)
(2)out:鼠标离开元素触发的函数（相当于mouseleave)

//简洁版1.  切换事件 就是鼠标经过和离开的复合写法
            $(".nav > li").hover(function() {
                //鼠标经过的函数
                $(this).children("ul").slideDown(200);
            }, function() {
                //鼠标离开的函数
                $(this).children('ul').slideUp(200);
            });
            
            //简洁版2：事件切换 hover 如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
            $(".nav > li").hover(function() {
                $(this).children("ul").slideToggle();
            })

动画队列及其停止排队方法

动画或效果队列
动画过着效果一旦出发就会执行，如果多次触发，就造成多个动画或者效果排队执行

停止排队 stop()
（1）stop()方法用于停止动画或效果
（2）注意：stop()写到动画或者效果的前面，相当于停止结束上一次的动画

           $(".nav > li").hover(function() {
                //stop()必须写到动画或者效果的前面
                $(this).children("ul").stop().slideToggle();
            })

淡入淡出效果
语法规范：
淡入：fadeIn([speed,[easing],[fn])
淡出：fadeOut([speed,[easing],[fn])
淡入淡出切换：fadeToggle([speed,[easing],[fn])
修改透明度：fadeTo([speed,opacity,[easing],[fn]) opacity透明度必须写，取值0-1之间，speed也必须写
显示参数
（1)参数都可以省略，无动画直接显示
（2）speed:三种预定速度之一的字符串（“slow”、“normal"、“fast”)或表示动画时长的毫秒数值(如：1000）
（3）easing：用于指定切换效果，默认是"swing",可用参数"linear"
（4）fn : 回调函数，再动画完成时执行的函数，每元素执行一次
( 其他效果可查看jquery 的 API）

 //5.淡入淡出效果
            $("button").eq(0).click(function() {
                //淡入
                $('div').fadeIn(2000);
            })
            $("button").eq(1).click(function() {
                //淡出
                $('div').fadeOut();
            })
            $("button").eq(2).click(function() {
                //淡入淡出切换
                $('div').fadeToggle();
            })
            $("button").eq(2).click(function() {
                //修改透明度：`fadeTo([speed,opacity,[easing],[fn])`  
                //opacity透明度必须写，取值0-1之间，speed也必须写
                $('div').fadeTo(1000, 0.5);
            })

高亮显示案例

思路：鼠标经过时，让其余的兄弟透明度降低，鼠标离开时透明度恢复

<style>
        * {
            padding: 0;
            margin: 0;
            background-color: black;
        }
        
        li {
            text-decoration: none;
        }
        
        .box {
            width: 650px;
            height: 430px;
            border: 1px solid #ffffff;
            margin: 100px auto;
        }
        
        .box ul li {
            display: inline-block;
            width: 200px;
            height: 200px;
            margin-top: 10px;
            margin-left: 10px;
        }
        
        img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<script src="jquery.min.js"></script>

<body>
    <div class="box">
        <ul>
            <li>
                <img src="images/xs.jpg" />
            </li>
            <li>
                <img src="images/zjl.jpg" />
            </li>
            <li>
                <img src="images/zxc.jpg" />
            </li>
            <li>
                <img src="images/zyl.jpg" />
            </li>
            <li>
                <img src="images/mobile1.jpg" />
            </li>
            <li>
                <img src="images/mobile2.jpg" />
            </li>
        </ul>
    </div>
    <script>
        $(function() {
            $(".box li").hover(function() {
                $(this).siblings().stop().fadeTo(400, 0.5);
            }, function() {
                $(this).siblings().stop().fadeTo(400, 1);
            })
        })
    </script>
</body>

httpkaidi

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery效果-显示与隐藏效果/滑动效果 / 高亮显示案例

jQuery效果显示与隐藏效果显示语法规范：show([speed,[easing],[fn])显示参数（1)参数都可以省略，无动画直接显示（2）speed:三种预定速度之一的字符串（“slow”、“normal"、“fast”)或表示动画时长的毫秒数值(如：1000）（3）easing：用于指定切换效果，默认是"swing",可用参数"linear"（4）fn : 回调函数，再动画完成时执行的函数，每元素执行一次( 其他效果可查看jquery 的 API）<body&gt.
复制链接

扫一扫

专栏目录