頁面加載和懸停時出現類似Coda的彈出窗口？ - jQuery的

Question

我使用的是科達般的泡沫在我的網站從這個：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上非常新奇。

Answer 1

這將幫助您保持並隱藏彈出窗口。

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

      }); 

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

       },hideDelay); 

      });