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

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

主要js代码：

纯文本
点击复制
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
<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>
Expand
<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>