在動畫過程中，jquery是（「：visible」）並且是（「：animated」）bug？

Question

這是事情。

我有多個圖標，每個圖標在div中顯示一條消息。

當我將鼠標懸停在圖標上時，框會顯示，當我將鼠標移出時，它會關閉。 當我點擊時，我希望盒子不會自動關閉，但只有當我點擊這個盒子的角落中的X.

這一切都很好，直到我加入動畫。

問題是，":animated"選擇器似乎無法正常工作，而":visible"似乎工作有誤。

當我將鼠標懸停在圖標上時，動畫開始，當我點擊圖標時，在動畫期間，我希望當我懸停時它不會關閉。相反，當我現在單擊它時，它立即開始關閉動畫。

代碼：

$(document).ready(function() { 

    $(".flyoutdialog").hide(); 

    $('.flyouticon').click(function() { 
     //alert("click"); 
    //when i click and this function gets called DURING animation i get: 
     alert($(this).next(".flyoutdialog").is(":visible")); //false 
     alert($(this).next(".flyoutdialog").is(":animated")); //false 
     $(this).next(".flyoutdialog").data("clicked", true); 
     showDialog($(this)); 
     return false; 
    }); 

    $('.flyouticon').hoverIntent({ 
     over: function() { 
      showDialog($(this)); 
     }, 
     timeout: 500, 
     out: function() { 
      hideDialog($(this)); 
     } 
    }); 

    $(".closedialog").click(function() { 
     var dialog = $(this).parent().parent(); 
     dialog.removeData("clicked"); 
     hideDialog(dialog.prev(".flyouticon")); 
    }); 

}); 

function showDialog(button) { 
    var dialog = button.next(".flyoutdialog"); 
    alert(dialog.is(":visible")); //false 
    alert(dialog.is(":animated")); //false 
    if (!dialog.is(":visible") && !dialog.is(":animated")) { //tried to not run this code when the dialog is not open nor is it in an animation. 
     //close all the other dialogs 
     $(".flyoutdialog").each(function() { 
//$(".flyoutdialog:visible") DID return RESULTS (1), the one under animation 
      if ($(this).is(":visible")) { 
       alert($(this).is(":visible")); //true??????? why is this true now? 
       alert($(this).is(":animated")); //STILL false! and that during animation.... 
       if ($(this)[0] === dialog[0]) { //this equal thing is false so the hidedialog gets called 
        //alert("hide"); 
       } else { 
        dialog.removeData("clicked"); 
        hideDialog($(this).prev(".flyouticon")); 
       } 
      } 
     }); 
     var offset = button.offset(); 
     dialog.offset({ top: offset.top - 5, left: offset.left + 25 }); 
     dialog.show("blind", { direction: "horizontal" }, 1500); 
    } 

} 

function hideDialog(button) { 
    var dialog = button.next(".flyoutdialog"); 
    //alert(dialog.data("clicked")); 
    if (!dialog.data("clicked")) { 
     dialog.hide("blind", { direction: "horizontal" }, 1500); 
    } 
} 

這是我或者這是jQuery的一個bug，或者我應該做不同？

HTML：

<div class="editor-field"> 
     <input id="postcode" name="postcode" value="" type="text"> 
<a href="#" class="flyouticon"> 
    <img src="/img/help.png" alt="Flyout" width="16"></a> 
<div style="display: none; top: 370px; left: 315.55px;" class="flyoutdialog grayicon" title="Postcode"> 
    <div class="title"> 

     <h4> 
      Postcode</h4> 
     <span class="closedialog ui-icon ui-icon-closethick">&nbsp;</span> 
    </div> 
    <p> 
     De postcode kan je met een asterix (*) invullen om zo een reeks van postcodes op te zoeken.<br> Bijvoorbeeld: 92** geeft alle postcodes terug tussen 9200 en 9299</p> 
</div> 

    </div> 
    <div class="editor-label"> 
     <label for="Gebruikerscode">Gebruikerscode</label> 
    </div> 
    <div class="editor-field"> 
     <input id="gebruikerscode" name="gebruikerscode" value="" type="text"> 
<a href="#" class="flyouticon"> 
    <img src="/img/help.png" alt="Flyout" width="16"></a> 

<div style="display: none;" class="flyoutdialog grayicon" title="Gebruikerscode"> 
    <div class="title"> 
     <h4> 
      Gebruikerscode</h4> 
     <span class="closedialog ui-icon ui-icon-closethick">&nbsp;</span> 
    </div> 
    <p> 
     Dit is de code of 'gebruikersnaam' waarmee de school inlogt. Deze is uniek.</p> 

</div> 

    </div> 

編輯2：

，如果我跑在功能驗證碼showDialog

alert(dialog.html()); 

當我點擊按鈕來觸發此事件，這當對話框是動畫，它會提示null

所以這是我的問題所在。但我該如何解決這個問題，爲什麼會這樣。

Answer 1

這是我如何修復它。 （如果任何人都可以優化它隨意這樣做）

$(document).ready(function() { 

    $('.flyouticon').each(function() { 
     var dlg = $(this).next(".flyoutdialog"); 
     var close = dlg.find(".closedialog"); 
     dlg.hide(); 

     close.click(function() { 
      //alert("clicked " + dlg.data("clicked")); 
      dlg.removeData("clicked"); 
      hideDialog(dlg); 
     }); 

     $(this).click(function() { 
      dlg.data("clicked", true); 
      showDialog(dlg, $(this)); 
      return false; 
     }); 
     $(this).hoverIntent({ 
      over: function() { 
       showDialog(dlg, $(this)); 
      }, 
      timeout: 500, 
      out: function() { 
       hideDialog(dlg); 
      } 
     }); 

    }); 

}); 


function showDialog(dialog, button) { 
    //close all the other dialogs 
    $(".flyoutdialog:visible").each(function() { 

     if ($(this)[0] === dialog[0]) { 
      // alert("dont hide"); 
     } else { 
      $(this).removeData("clicked"); 
      hideDialog($(this)); 
     } 
    }); 
    if (!dialog.is(":visible")) { 
     //position the dialog next to the button 
     var offset = button.offset(); 
     dialog.offset({ top: offset.top - 5, left: offset.left + 25 }); 
     dialog.show("blind", { direction: "horizontal" }, 1500); 
    } 
} 

function hideDialog(dialog) { 
    if (!dialog.data("clicked") && dialog.data("status") != "closing" && dialog.is(":visible")) { 
     dialog.data("status", "closing"); //set the status to closing, so it doesnt close again, when it's already closing (but still visible) 
     dialog.hide("blind", { direction: "horizontal" }, 1500); 
     dialog.queue(function() { 
      //alert(dialog.data("status")); 
      dialog.removeData("status"); 
      $(this).dequeue(); 
     }); 
    } 
} 

附加字：

通過每個項目seperately綁定功能，我做了圖標和對話框之間的「紐帶」。此鏈接是需要的，因爲使用sibling()並不總是有效，就像對話框在動畫中時一樣，兄弟會返回null。通過'連接'這兩個，我不再有這個問題。它現在工作得非常好。