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">&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:

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.

Können Sie veröffentlichen, markup? Sie überprüft zwei verschiedene Dinge...das erste ist die Prüfung, , .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

Schreibe einen Kommentar