1

我在我的网站上使用了类似 Coda 的气泡：http: //jqueryfordesigners.com/coda-popup-bubbles/

我想知道是否可以在页面加载后直接显示气泡，让它停留几秒钟然后再次隐藏它，同时当你将鼠标悬停在触发器上时仍然能够让它出现？

这是我的代码：

$(document).ready(function(){

    $(function() {
    $('.bar').each(function() {
        // options
        var distance = 5;
        var time = 250;
        var hideDelay = 1000;

        var hideDelayTimer = null;

        // tracker
        var beingShown = false;
        var shown = false;

        var trigger = $('.trigger', this);
        var popup = $('.popup', this).css('opacity', 0);

        // set the mouseover and mouseout on both element
        $([trigger.get(0), popup.get(0)]).mouseover(function() {
            // stops the hide event if we move from the trigger to the popup element
            if (hideDelayTimer) clearTimeout(hideDelayTimer);

            // don't trigger the animation again if we're being shown, or already visible
            if (beingShown || shown) {
                return;
            } else {
                beingShown = true;

                // reset position of popup box
                popup.css({
                    top: 410,
                    left: 164,
                    display: 'block' // brings the popup back in to view
                })

                // (we're using chaining on the popup) now animate it's opacity and position
                .animate({
                    top: '-=' + distance + 'px',
                    opacity: 1
                }, time, 'swing', function() {
                    // once the animation is complete, set the tracker variables
                    beingShown = false;
                    shown = true;
                });
            }
        }).mouseout(function() {
            // reset the timer if we get fired again - avoids double animations
            if (hideDelayTimer) clearTimeout(hideDelayTimer);

            // store the timer so that it can be cleared in the mouseover if required
            hideDelayTimer = setTimeout(function() {
                hideDelayTimer = null;
                popup.animate({
                    top: '-=' + distance + 'px',
                    opacity: 0
                }, time, 'swing', function() {
                    // once the animate is complete, set the tracker variables
                    shown = false;
                    // hide the popup entirely after the effect (opacity alone doesn't do the job)
                    popup.css('display', 'none');
                });
            }, hideDelay);
        });
    });
});

});

我非常感谢您的帮助，如果这非常容易和明显，我深表歉意！我是 jQuery 的新手。

4

1 回答 1

1

这将帮助您留下并隐藏弹出窗口。

        label.addEventListener("mouseover",function(e)
          {                 
                   if(hideDelayTimer)
                   clearTimeout(hideDelayTimer);
                   label.appendChild(popup);

          });

         label.addEventListener("mouseout",function()
           {
                  hideDelayTimer=setTimeout(function()
                 {
                      label.removeChild(popup);

                 },hideDelay);

           });
于 2014-05-01T10:10:58.933 回答