jQuery鼠标悬停手风琴效果
  • 分享到微信朋友圈
    X
立即下载 查看演示

本文介绍如何使用jQuery制作鼠标悬停手风琴效果

主要js代码：

<script type="text/javascript">

    //手风琴效果
    $(".jqfree ul li").each(function () {
        var fold = $(this).find(".fold");
        var unfold = $(this).find(".unfold");
        if (fold.is(":hidden")) {
            $(this).width(630);
        } else {
            $(this).width(140);
        }
    })

    $(".jqfree ul li").hover(function () {
        var li_index = $(this).index();
        $(this).animate({ width: 630 }, 0);
        $(this).find(".unfold").show();
        $(this).find(".fold").hide();
        $(this).siblings().animate({ width: 140 }, 0);
        $(this).siblings().find(".unfold").hide();
        $(this).siblings().find(".fold").show();
    })
    </script>