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

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

关键jQuery：

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