高亮显示手风琴案例

目录

1.高亮显示

2.王者荣耀风琴

---

1.高亮显示

1. 利用透明度修改，突出选中的图片
2. 鼠标进入的时候,其他的li标签透明度：0.5
3. 鼠标离开，其他li 透明度改为 1
4. 关键利用fadeTo修改透明度

 效果展示

 实现代码

<script src="jquery.min.js"></script>
    <script>
        $(function() {
            //鼠标进入的时候,其他的li标签透明度：0.5
            $(".wrap li").hover(function() {
                $(this).siblings().stop().fadeTo(400, 0.5);
            }, function() {
                // 鼠标离开，其他li 透明度改为 1
                $(this).siblings().stop().fadeTo(400, 1);
            })

        });
    </script>

2.王者荣耀风琴

利用淡出淡入实现风琴案例

鼠标经过某个li有两步操作

1.当前li宽度变为224px同时小图片淡出大图片淡入

2.其余兄弟li宽度变为69px小图片淡入大图片淡出

注意：

为了保证页面不溢出效果好不多次动画同时展现需要使用stop（）方法。

实现效果

实现代码 

<script src="jquery.min.js"></script>
    <script>
       $(function(){
        //鼠标经过某个li有两部操作
        $(".king li").mouseenter(function(){
            //1.当前li宽度变为224px同时小图片淡出大图片淡入
            $(this).stop().animate({
                width:224
            }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
            //2.其余兄弟li宽度变为69px小图片淡入大图片淡出
            $(this).siblings("li").stop().animate({
                width:69
            }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();

       }) 
        })        
        
    </script>