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;

            width: 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>