手风琴案例（jQuery）

夏天的遥遥漓曦

于 2023-07-28 17:16:08 发布

阅读量555

点赞数

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/m0_73809176/article/details/131984433

版权

案例效果

代码实现

jQuery代码（两种方法）

方法一：hover版

        $(function () {

            $(".king li").hover(function() {
                 $(this).addClass("current").siblings().removeClass("current");
             }, function() {
                 $(".king li").eq(0).addClass("current").siblings().removeClass("current");
             })

            
        })

方法二：mouseenter版

        $(function () {
            // ① 鼠标经过某个小li 有两步操作：
            $(".king li").mouseenter(function () {
                // ② 当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入
                $(this).stop().animate({
                    width: 224,
                }, 200).find(".small").fadeOut().siblings(".big").stop().fadeIn();
                // ③ 其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出
                $(this).siblings("li").stop().animate({
                    width: 69,
                }, 200).find(".small").fadeIn().siblings(".big").stop().fadeOut();
            })

            
        })