jQuery延迟悬停事件从初始化答案

【问题标题】：jquery delay hover event from initializingjQuery延迟悬停事件从初始化
【发布时间】：2012-07-12 17:20:38
【问题描述】：

我有一个页眉需要在页面加载时延迟一定时间，然后淡出。 It can be tested here。我还添加了代码：

html

<header id="main-header">
    <div id="inner"></div>
</header>

css

#main-header {height: 70px;}
#inner {height: 70px; background: red;}

javascript

$(function() {
    $('#inner').stop().delay(2300).animate({"opacity": "0"}, 1500);
    $('#main-header').hover(
    function() {$('#inner').stop().animate({"opacity": "1"}, 1000);},
    function() {$('#inner').stop().animate({"opacity": "0"}, 1500);}
);
});

当光标悬停在该区域上时，它将淡入。

如果用户等到初始延迟/淡出完成，一切都会完美无缺，但是当光标在初始延迟/淡出完成之前悬停在标题上时，我遇到了问题。请参阅上面的链接。

我想我需要以某种方式延迟悬停初始化，在这种情况下为 2300 毫秒。但如果有人有更好的解决方案，我将不胜感激。谢谢！

【问题讨论】：

insertusernamehere 在 cmets 中为他的回答留下了一个很好的观点。它很可能在 IE7 或 8 中不起作用，因为它们不支持 <header> 标签。据我所知，Chrome、Firefox 和 IE 9 都可以工作。

标签： jquery animation hover delay

【解决方案1】：

您正在使用<header> 标签，该标签在 IE9 之前的 IE 中不可用。这是您的脚本在 IE9 之前无法正常工作的原因。据我所知，它在当前状态下完美适用于 Chrome、Firefox 和 IE9。

HTML：

<div id="main-header">
    <div id="inner"></div>
</div>

JS：

$(function() {
    $('#inner').stop().delay(2300).animate({"opacity": "0"}, 1500);
    $('#main-header').hover(
        function() {$('#inner').stop().animate({"opacity": "1"}, 1000);},
        function() {$('#inner').stop().animate({"opacity": "0"}, 1500);}
    );
});

Live DEMO

【讨论】：

【解决方案2】：

这应该可以解决问题，因为它可以防止当用户在开始时移过标题时触发初始淡出：

$(function() {

    var tictac      = setTimeout( function() { $('#inner').animate({"opacity": "0"}, 1500); }, 2300 )

    $('#main-header').hover(
        function() {
            clearTimeout(tictac);   
            $('#inner').stop().animate({"opacity": "1"}, 1000);
        },
        function() { $('#inner').stop().animate({"opacity": "0"}, 1500);}
    );

});

请注意：初始演示在 IE

【讨论】：

这没有任何区别。
使用初始脚本，无论用户是否悬停在标题上，它都会开始淡出。这样，当用户在初始淡出之前移过标题时，标题就会保留。但也许我把你的问题弄错了？
他粘贴的初始脚本在 Chrome、Firefox 和 IE9 中对我有用，但在 IE7 或 8 中不起作用。您的代码在 IE7 或 8 中没有修复它。
我猜这个脚本不会在 IE7 或 IE8 中运行，因为他使用了一个 header-Tag，它在
很可能就是这样。请添加您的答案。