jquery(":visible") und(":animated") Fehler während der animation?
Hier ist das Ding.
Habe ich mehrere Symbole, die jeweils eine Nachricht in einem div.
wenn ich den Mauszeiger über das Symbol, das erscheint, wenn ich die Maus aus, schließt es.
wenn ich darauf klicke, möchte ich, dass die box nicht in der Nähe automatisch, sondern erst, nachdem ich klicken Sie auf das X in der Ecke dieser box.
dies alles funktionierte gut, bis ich Hinzugefügt animation.
das problem ist, dass die ":animated"
selector scheint nicht zu funktionieren IMMER, und ":visible"
scheint zu funktionieren fehlerhaft.
wenn ich den Mauszeiger über das Symbol, wird die animation startet, wenn ich auf das Symbol, während der animation, ich will, dass es nicht schließen, wenn ich schweben. in der Stelle, wenn ich auf es jetzt, es beginnt mit der schließen-animation sofort.
Code:
$(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);
}
}
bin ich das oder ist das ein bug in jQuery, oder sollte ich das anders?
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"> </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"> </span>
</div>
<p>
Dit is de code of 'gebruikersnaam' waarmee de school inlogt. Deze is uniek.</p>
</div>
</div>
Edit 2:
wenn ich diesen code ausführen, der in der Funktion showDialog
alert(dialog.html());
wenn ich auf die Taste, um das Feuer dieses Ereignis, Wenn dieses Dialogfeld zu ANIMIEREN, warnt null
also das ist, wo mein problem ist. aber wie kann ich dieses Problem beheben, und warum ist dieses.
.flyoutdialog
, die später die Schleife durch alle .flyoutdialog
Elemente.ich weiß, aber es gibt nur 2 Dialoge, und klicken Sie auf eine ist zu animieren, die show-animation.... html Hinzugefügt.
InformationsquelleAutor Stefanvds | 2010-09-15
Du musst angemeldet sein, um einen Kommentar abzugeben.
Dies ist, wie ich es behoben. (wenn jemand kann, optimieren Sie es, fühlen Sie sich frei, dies zu tun)
ein extra Wort:
Durch verbindliche Funktionen separat pro Artikel, ich habe eine 'Verbindung' zwischen dem Symbol und der dialog. dieser link wurde nötig, weil mit
sibling()
nicht immer arbeiten, wie wenn der dialog wurde in einer animation, die Geschwister, gibt Sie null zurück. durch die 'Verknüpfung' diese 2 habe ich nicht mehr dieses problem haben. Es funktioniert sehr gut jetzt.InformationsquelleAutor Stefanvds