jquery is(“:visible”) and is(“:animated”) bug during animation?

Question

Here\'s the thing.

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

when i hover over the icon, the box shows, when i mouse out, it closes. when i clic

Answer 1

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

an extra word:

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.