动画期间jquery是(“:visible")和is(“:animated")错误吗? [英] jquery is(":visible") and is(":animated") bug during animation?

问题描述

这是东西.

我有多个图标，每个图标都在一个div中显示一条消息.

I have multiple icons, which each show a message in a div.

当我将鼠标悬停在图标上时，该框显示，当我将鼠标移出时，它会关闭. 当我单击时，我希望该框不会自动关闭，而只是在单击此框角处的X之后.

when i hover over the icon, the box shows, when i mouse out, it closes. when i click, i want that the box will not close automatic, but only after i click the X in the corner of this box.

在我添加动画之前，一切都很好.

this all worked good, until I added animation.

问题在于":animated"选择器似乎永远无法工作，而":visible"似乎工作有误.

the problem is that the ":animated" selector doesnt seem to work EVER, and ":visible" seems to work faulty.

当我将鼠标悬停在图标上时，动画开始，当我单击图标时，在动画期间，我希望当鼠标悬停时它不会关闭.相反，当我现在单击它时，它将立即开始关闭动画.

when i hover over the icon, the animation starts, when i click on the icon, during the animation, i want that it will not close when i hover out. in stead, when i click it now, it starts the closing animation immediately.

代码:

$(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中的错误，还是我应该采取其他方式?

is this me or is this a bug in jQuery, or should i do this differently?

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>

如果我在函数showDialog

alert(dialog.html());

当我单击按钮触发此事件时，当此对话框处于动画"状态时，它会提醒null

when I click on the button to fire this event, When this dialog is ANIMATING, it alerts null

这就是我的问题所在.但是我该如何解决这个问题，为什么呢?

so this is where my problem is. but how do i fix this, and why is this.

推荐答案

这是我修复它的方式. (如果有人可以优化，请随时这样做)

This is how i fixed it. (if anyone can optimize it feel free to do so)

$(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.通过链接"这两个，我不再有这个问题.现在效果很好.

By binding functions seperately per item, I made a 'link' between the icon and the dialog. this link was needed, because using sibling() doesnt always work, like when the dialog was in an animation, the sibling returned null. by 'linking' these 2, I no longer have this problem. It works rather nicely now.

这篇关于动画期间jquery是(“:visible")和is(“:animated")错误吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！