jquery is(“:visible”) 和 is(“: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>

编辑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();
        });
    }
}

额外的话：

通过分别绑定每个项目的功能，我在图标和对话框之间建立了“链接”。需要此链接，因为使用 sibling() 并不总是有效，就像当对话框处于动画中时，同级返回 null。通过“链接”这两个，我不再遇到这个问题。现在效果很好。