Question

我在aspx页面中有一个元素，其中class =“。_ aHide”它带有一条消息，并且会反复显示。

<div id="Message1" class="._aHide" runat="server" visible="true"><p>My Message</p></div>

aspx服务器端元素在页面加载时未创建，如果它是visible property = true。

除非鼠标悬停，否则我需要在显示它7秒后隐藏此div。

我创建了这段代码

$(document).ready(function () {
    var hide = false;
    $("._aHide").hover(function () {
    clearTimeout(hide);
    });

    $("._aHide").mouseout(function () {
    hide = setTimeout(function () { $("._aHide").fadeOut("slow") }, 7000);
    hide;
    });

    $("._aHide").ready(function () {
    hide = setTimeout(function () { $("._aHide").fadeOut("slow") }, 7000);
    hide;
    });
});

但是这里的事情错了

1-此代码仅工作一次，我多次显示此消息。

2-所有消息框都隐藏了一次，因为我无法在settimeout中使用$（this），我不知道为什么。

感谢您的帮助，我真的很感激

Answer 1

删除HTML代码中的点：

<div id="Message1" class="_aHide" runat="server" visible="true"><p>My Message</p></div>

请参阅：http://api.jquery.com/class-selector/

Answer 2

tbraun89是对的，删除“。”在您的HTML代码中。

然后，您可以像这样简化代码：

JQuery hover使用mouseenter和mouseleave

有两个函数

$(document).ready(function () {
    var hide = false;
    $("._aHide").hover(
    function () {
        //Cancel fadeout
        clearTimeout(hide);
    },
    function(){
         //re-set up fadeout
        clearTimeout(hide);            
        hide = setTimeout(function () { $("._aHide").fadeOut("slow") }, 7000);
    });

    //Set up fadeout
    hide = setTimeout(function () { $("._aHide").fadeOut("slow") }, 7000);
});

通过jquery自动隐藏元素 - 代码不起作用

2 个答案: