如何檢測jQuery UI碰撞何時發生

Question

我使用jQuery UI位置懸停<td>時彈出一個表格。

HTML - 彈出式箭頭左/右絕對位置。

<div id="compare-popup"> 
    <div id="arrow-left"></div> 
    <div id="arrow-right"></div> 
    <table cellspacing="0" class="table"> 
     <tr> 
      <td colspan="8">January 4th</td> 
     </tr> 
     <tr> 
      <td>12,086</td> 
      <td>6,992</td> 
      <td>7,277</td> 
      <td>6,612</td> 
     </tr> 
    </table> 
</div> 

Java腳本：

$(document).ready(function(){ 
    $('td.popup').hoverIntent(function(){ 
     $('#compare-popup').fadeIn(); 
     $('#compare-popup').position({ 
      my: 'left + 10 top', 
      at: 'right + 10 top', 
      of: $(this), 
      collision: 'flip' 
     }); 
    }, 
    function(){ 
     $('#compare-popup').fadeOut(); 
     $('#compare-popup').position({ 
      my: 'left + 10 top', 
      at: 'right + 10 top', 
      of: $(this), 
      collision: 'flip' 
     }); 
    }) 
}); 

現在jQuery UI的檢測瀏覽器的優勢，並使其翻轉。
彈出窗口的左右箭頭指向原點單元格。
請告訴我如何檢測彈出窗口的翻轉狀態，以便我可以顯示/隱藏每個側面箭頭。

請點擊鏈接以更好地理解我的問題。 http://ninninny.com/question/

謝謝。

Answer 1

可能有一種更優雅的方式來做到這一點，但爲了保持簡單，您可以添加一條if語句來查看彈出窗口的偏移量。事情是這樣的：

Working Example

$(document).ready(function() { 
    $('td.popup').hoverIntent(function() { 
     $('#compare-popup').fadeIn(); 
     $('#compare-popup').position({ 
      my: 'left+10 top', 
      at: 'right+10 top', 
      of: $(this), // or $("#otherdiv) 
      collision: 'flip' 
     }); 
     if ($('#compare-popup').offset().left > $(this).offset().left) { //Important bit 
      $('#arrow-left').show(); 
      $('#arrow-right').hide(); 
     } else { 
      $('#arrow-left').hide(); 
      $('#arrow-right').show(); 
     } 
    }, 

    function() { 
     $('#compare-popup').fadeOut(); 
     $('#compare-popup').position({ 
      my: 'left+10 top', 
      at: 'right+10 top', 
      of: $(this), // or $("#otherdiv) 
      collision: 'flip' 
     }); 
    }); 
});