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

本文介绍如何使用jQuery实现手风琴效果当鼠标悬停的时候展开对应图片

关键jQuery：

<script>
    $(function () {
        // 默认展开第一个图片
        jQuery('.sfq ul li.cur').animate({ width: '510px' }, 'slow');

        jQuery('.sfq ul li').hover(function () {
            // 获取li索引
            var _index = $(this).index();

            $(this).addClass('cur')
             .stop().animate({ width: '510px' }, 'slow').siblings()
             .stop().animate({ width: '230px' }, 'slow').removeClass('cur');
        })
    }); 
</script>