手风琴案例(jQuery)

   案例效果

 代码实现

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();
            })

            
        })

你可能感兴趣的:(jquery,前端,javascript)