JQuery Delay Hover效果

CSS代码

.tbui_aside_float_bar
        {
            position: fixed;
            left: 50%;
            bottom: 120px;
            margin-left: 608px;
            border-top: 1px solid #e5e5e5;
            z-index: 11;
            _position: absolute;
            _top: expression(documentElement.scrollTop+documentElement.clientHeight - this.offsetHeight-100);
        }
        .tbui_aside_float_bar li a
        {
            display: block;
             55px;
            height: 55px;
            background: url(/image/sidebar.png) no-repeat;
            outline: 0;
        }
        .tbui_aside_float_bar li.tbui_fbar_fav a:hover
        {
            background-position: -55px 0px;
        }
        .tbui_aside_float_bar li.tbui_fbar_fav a
        {
        }
        .tbui_aside_float_bar li.tbui_fbar_share a:hover
        {
            background-position: -55px -55px;
        }
        .tbui_aside_float_bar li.tbui_fbar_share a
        {
            background-position: 0 -55px;
        }
        .tbui_aside_float_bar li.tbui_fbar_top a:hover
        {
            background-position: -55px -110px;
        }
        .tbui_aside_float_bar li.tbui_fbar_top a
        {
            background-position: 0 -110px;
        }

HTML代码

    <div class="sidebar">
        <div id="hoverDiv" class="hoverDiv" style="position: absolute; display: block;border: 1px solid #e9e9e9;">
            <div class="hoverDivConent">
                <h6 style="background-color: #f6f6f6; text-align:right;">
                    为您服务</h6>
                    <ul>
                        <li>1号</li>
                        <li>2号</li>
                        <li>3号</li>
                    </ul>                    
            </div>
        </div>
        <ul class="tbui_aside_float_bar">
           
            <li class="tbui_aside_fbar_button tbui_fbar_share"><a id="share" class="hover_button"
                href="#"></a></li>            
        </ul>
    </div>

JAVAScript

    <script type="text/javascript">
        $(document).ready(function () {
            
            $.fn.queueInterruptibleAction = function (delayMilseconds, actionCallback) {
                //cancel if other action exist
                this.cancelInterruptibleAction();
                // delay execute delayCallback
                var timerId = window.setTimeout(function () {
                    $.removeData(this, 'timerId');
                    actionCallback.call(this);
                }, delayMilseconds);
                $.data(this, 'timerId', timerId);
            };

            $.fn.cancelInterruptibleAction = function () {
                var timerId = $.data(this, 'timerId');
                if (timerId != null) {
                    $.removeData(this, 'timerId');
                    window.clearTimeout(timerId);
                }
            };

            //tClass=TargetClass,pClass=ParentClass
            $.fn.delayHover = function (tClass, pClass, enterDelay, leaveDelay) {
                if (enterDelay == null) enterDelay = 150;
                if (leaveDelay == null) leaveDelay = 400;
                return this.each(function () {
                    var trigger = $(this); //button
                    var target = $(this).closest(pClass).find(tClass); //view       

                    trigger.mouseenter(function () {
                        x = trigger.offset();
                        target.css("left", x.left - 100);
                        target.css("top", x.top + 2);
                        target.queueInterruptibleAction(enterDelay, function () {
                            target.fadeIn();
                        });
                    });
                    trigger.mouseleave(function () {
                        target.queueInterruptibleAction(leaveDelay, function () {
                            target.fadeOut();
                        });
                    });
                    target.mouseenter(function () {
                        target.cancelInterruptibleAction();
                    });
                    target.mouseleave(function () {
                        target.queueInterruptibleAction(leaveDelay, function () {
                            target.hide();
                        });
                    });
                });
            };

            $('.hover_button').delayHover('.hoverDiv', '.sidebar', 150, 400);
        });   //end of document.ready



    </script>