延迟悬停功能直到动画停止后?

时间:2013-05-18 16:04:50

标签: jquery hover delay settimeout

编辑:我现在意识到只有在延迟时间内用户悬停在文本上方才会发生颜色变化。 如何在动画停止之前延迟悬停功能?

我不是javascript编码器,所以我很难搞清楚这里缺少什么。 我有两个div - 侧边栏和生物文本,这是客户想要的行为:

两个fadein onload,侧边栏稍微生物。 40秒后,生物消退至20%,侧边栏消退至80%。

之后,生物只会在悬停时淡入。

现在,除了40秒之后,生物文本再次闪烁1秒钟然后重新亮起,所有这些都有效。我确定它很简单。有什么想法吗? div根本没有嵌套。使用jquery / 1.9.1 / jquery.min.js

http://www.halamufleh.com/about

谢谢!

$(document).ready(function () {
    // fade in content.
    $('#biotext').fadeIn(2000).delay(40000).fadeTo(5000, 0.20);
    $('#sidebar').fadeTo(4000, .6).delay(40000).fadeTo(2000, .8);
    $("#biotext").hover(function () {
        $("#biotext").fadeTo(1000, 1.0); // This sets the opacity to 100% on hover
    }, function () {
        $("#biotext").fadeTo(8000, 0.2); // This sets the opacity back to 20% on            mouseout
    });

});

1 个答案:

答案 0 :(得分:1)

我测试了您提供的网站,它按预期工作。我认为你徘徊在文字上并且搞砸了,而不是你可以使用好的旧javascript setTimeout()

$(document).ready(function () {
    // fade in content.
    $('#biotext').fadeIn(2000).delay(40000).fadeTo(5000, 0.20);
    $('#sidebar').fadeTo(4000, .6).delay(40000).fadeTo(2000, .8);
    setTimeout(function() {
      $("#biotext").hover(function () {
          $("#biotext").fadeTo(1000, 1.0); // This sets the opacity to 100% on hover
      }, function () {
          $("#biotext").fadeTo(8000, 0.2); // This sets the opacity back to 20% on            mouseout
      });      
    }, 40000);
});