jQuery鼠标不停滑动手风琴bug修复

当鼠标悬浮在手风琴过快的时候，手风琴会出现不停的收缩和展开bug,本文是通过setTimeout来修复的，具体代码请看手风琴演示部分。

分类：图片代码 > 手风琴难易：高级

查看演示下载资源下载积分： 20 积分

手风琴标题和图片列表

<div class="picon" id="picon">
    <ul>
        <li>
            <img width="252" height="400" alt="jquery flow 图片切换滚动插件 带分页索引按钮控制图片左右滚动" src="images/3485.jpg" />
            <div>
                <h3><a href="http://www.sucaihuo.com/js/175.html" target="_blank">jQuery+fullPage.js制作百度百科史记</a></h3>
                <p><a href="http://www.sucaihuo.com/" target="_blank">本文参展了百度百科史记2013http://baike.baidu.com/shiji/2013的效果。</a></p>
            </div>
        </li>
        <li>
            <img width="252" height="400" alt="jquery图片切换滚动 水平手风琴切换滚动鼠标滑过图片水平切换" src="images/32469.jpg" />
            <div>
                <h3><a href="http://www.sucaihuo.com/js/375.html" target="_blank">jQuery+css静态下拉导航菜单</a></h3>
                <p><a href="http://www.sucaihuo.com/" target="_blank">分享一个网页顶部下拉菜单效果。</a></p>
            </div>
        </li>
        <li>
            <img width="252" height="400" alt="jquery 导航菜单 jquery和CSS3制作一个动画导航的向下滑动框菜单" src="images/3247.jpg" />
            <div>
                <h3><a href="http://www.sucaihuo.com/js/32.html" target="_blank">jQuery实现页面滚动时元素智能定位</a></h3>
                <p><a href="http://www.sucaihuo.com/" target="_blank">我们在天猫商城下拉滚动条时，“宝贝详情”、“交易详情”等一排按钮会一直出现在浏览器顶部，方便我们切换导航。</a></p>
            </div>
        </li>
    </ul>
</div>

setTimeout+mouseover悬浮展开和收缩手风琴

$(function() {
    var movetime = 500;
    var maxw = 252;
    var avgw = parseInt((1130 - maxw - 2) / 11);
    var index;
    var t = false; //延时执行
    var _this;

    //标记当前
    function cur(ele) {
        ele = $(ele) ? $(ele) : ele;
        ele.addClass("cur").siblings().removeClass("cur");
    }

    $("#picon li:eq(0)").addClass("cur").animate({"width": maxw + "px"});

    $("#picon").find("li").mouseover(function() {
        _this = $(this);
        index = $("#picon li").index($(this)[0]);
        var act = function() {
            _this.siblings("li").removeClass("cur");
            _this.animate({"width": maxw + "px"}, {duration: movetime, easing: "easeOutQuart", complete: function() {
                    cur(_this)
                }}).siblings("li").animate({"width": avgw + "px"}, {duration: movetime})
        }
        t = setTimeout(act, 200);
        return false;
    }).mouseout(function() {
        if (t) {
            clearTimeout(t);
        }
    });
})