jquery is (": visible") и есть (": animated") ошибка во время анимации?

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, или я должен делать это по-другому?

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> 

Edit 2:

если я запускаю этот код в функции showDialog

alert(dialog.html()); 

, когда я нажимаю на кнопку, чтобы стрелять это событие, когда это диалоговое окно ANIMATING, оно предупреждает 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(); 
     }); 
    } 
} 

дополнительное слово:

Связывая функции отдельно за единицу, я сделал «связь» между иконой и диалога. эта ссылка была необходима, потому что использование sibling() не всегда работает, например, когда диалог был в анимации, родной брат ответил null. «связывая» эти 2, у меня больше нет этой проблемы. Сейчас это работает неплохо.