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

查看：23
本文介绍了jquery is(":visible") 和 is(":animated") 动画期间的错误?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

事情就是这样.

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

当我将鼠标悬停在图标上时，该框会显示，当我将鼠标移开时，它会关闭.当我点击时，我希望该框不会自动关闭，但只有在我点击此框角落的 X 后才会关闭.

这一切都很好，直到我添加了动画.

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

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

代码:

$(document).ready(function () {$(".flyoutdialog").hide();$('.flyouticon').click(function () {//警报(点击")；//当我点击并在动画期间调用此函数时，我得到:alert($(this).next(".flyoutdialog").is(":visible"));//错误的alert($(this).next(".flyoutdialog").is(":animated"));//错误的$(this).next(".flyoutdialog").data("clicked", true);showDialog($(this));返回假；});$('.flyouticon').hoverIntent({结束:函数(){showDialog($(this));},超时:500，出:函数(​​){hideDialog($(this));}});$(".closeddialog").click(function () {var dialog = $(this).parent().parent();dialog.removeData("点击");hideDialog(dialog.prev(".flyouticon"));});});功能显示对话框(按钮){var dialog = button.next(".flyoutdialog");警报(dialog.is(:可见"))；//错误的警报(dialog.is(:动画"))；//错误的if (!dialog.is(":visible") && !dialog.is(":animated")) {//尝试在对话框未打开或动画中不运行此代码.//关闭所有其他对话框$(".flyoutdialog").each(function () {//$(".flyoutdialog:visible") DID return RESULTS (1)，动画下的那个如果 ($(this).is(":visible")) {警报($(this).is(":visible"));//真的???????为什么现在是这样?alert($(this).is(":animated"));//还是假的！以及动画期间....if ($(this)[0] === dialog[0]) {//这个相等的东西是假的所以隐藏对话框被调用//警报(隐藏")；} 别的 {dialog.removeData("点击");hideDialog($(this).prev(".flyouticon"));}}});var offset = button.offset();dialog.offset({ top: offset.top - 5, left: offset.left + 25 });dialog.show("blind", { direction: "horizo​​ntal" }, 1500);}}功能隐藏对话框(按钮){var dialog = button.next(".flyoutdialog");//警报(dialog.data(点击"))；如果(！dialog.data(点击")){dialog.hide("blind", { direction: "horizo​​ntal" }, 1500);}}

这是我还是 jQuery 中的一个错误，还是我应该做不同的事情?

html:

 
<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="邮政编码"><div class="title"><h4>邮政编码<span class="closedialog ui-icon ui-icon-closethick">&nbsp;</span>
<p>De postcode kan je meet een asterix (*) invullen om zo een reeks van postcodes op te zoeken.<br>Bijvoorbeeld:92** geeft alle 邮政编码 terug tussen 9200 en 9299</p>

<div class="editor-label"><label for="Gebruikerscode">Gebruikerscode</label>

<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>

<p>Dit 是 'gebruikersnaam' waarmee de school inlogt 的代码.德泽是独一无二的.</p>

编辑 2:

如果我在函数 showDialog

中运行此代码

alert(dialog.html());

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

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

解决方案

我就是这样解决的.(如果有人可以优化它，请随意这样做)

$(document).ready(function () {$('.flyouticon').each(function () {var dlg = $(this).next(".flyoutdialog");var close = dlg.find(".closeddialog");dlg.hide();close.click(函数(){//alert("点击" + dlg.data("点击"));dlg.removeData("点击");隐藏对话框(dlg)；});$(this).click(function () {dlg.data("点击", true);showDialog(dlg, $(this));返回假；});$(this).hoverIntent({结束:函数(){showDialog(dlg, $(this));},超时:500，出:函数(​​){隐藏对话框(dlg)；}});});});功能 showDialog(对话框，按钮){//关闭所有其他对话框$(".flyoutdialog:visible").each(function () {if ($(this)[0] === dialog[0]) {//alert("不要隐藏");} 别的 {$(this).removeData("点击");hideDialog($(this));}});如果(！dialog.is(:可见")){//将对话框放在按钮旁边var offset = button.offset();dialog.offset({ top: offset.top - 5, left: offset.left + 25 });dialog.show("blind", { direction: "horizo​​ntal" }, 1500);}}功能隐藏对话框(对话){if (!dialog.data("clicked") && dialog.data("status") != "关闭" && dialog.is(":visible")) {dialog.data("状态", "关闭");//将状态设置为关闭，所以它不会再次关闭，当它已经关闭(但仍然可见)dialog.hide("blind", { direction: "horizo​​ntal" }, 1500);dialog.queue(函数(){//警报(dialog.data(状态"))；dialog.removeData("状态");$(this).dequeue();});}}

一个额外的词:

通过为每个项目单独绑定功能，我在图标和对话框之间建立了一个链接".这个链接是需要的，因为使用 sibling() 并不总是有效，就像对话框在动画中一样，兄弟返回 null.通过链接"这两个，我不再有这个问题.现在效果很好.

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 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.

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.

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

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>

Edit 2:

if I run this code in function showDialog

alert(dialog.html());

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

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.

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

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆