jQuery-----手风琴效果demo

js代码过程解释

<script src="./jquery.min.js"></script>
<script>
    // 手风琴效果
    // 每个li中,图片默认只显示一部分
    // 当鼠标进过时,经过哪个图片,哪个图片就完全显示,其他图片就显示更小的一部分
    // 显示的图片,宽度变为520,其他图片宽度变为40

    $('ul>li').mouseover(function(){
        // 让当前li的宽度变为520
        // 让兄弟li的宽度变为60
        $(this).stop().animate({width:520,} , 1000).siblings().finish().animate({width:60} , 1000);
    })

    $('ul').mouseout(function(){
        // 让所有li的宽度,变为默认的 180
        $('ul>li').stop().animate( {width : 180} , 1000 );
    })

    // 总结:
    // 鼠标移入 li 标签
    //    让 当前的li 标签 宽度变大 , 其他兄弟li标签,宽度变小
    // 鼠标移出 整个ul 
    //    让 所有的 li标签, 宽度恢复原状

</script>