Question

我有一个标题需要在页面加载时延迟一段时间，然后淡出。 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);}
);
});

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

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

我想我需要延迟悬停从某种方式初始化，在这种情况下，2300ms ..但如果有人有更好的解决方案，我会很感激。谢谢！

Answer 1

这应该可以解决问题，因为当用户在开头移动标题时，它会阻止初始淡出：

$(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＆lt; 9，因为它使用HTML5标签。

Answer 2

您正在使用IE9之前的IE中未提供的<header>标记。这是您的脚本在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

jquery延迟悬停事件初始化

2 个答案: