0

我有一个页眉需要在页面加载时延迟一段时间，然后淡出。可以在这里测试。我还添加了代码：

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 毫秒。但如果有人有更好的解决方案，我将不胜感激。谢谢！

4

2 回答 2

0

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

$(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 < 9 中无法运行，因为它使用的是 HTML5 标记。

于 2012-07-12T17:27:29.127 回答
0

您正在使用<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);}
    );
});

现场演示

于 2012-07-12T17:47:30.867 回答