延迟悬停功能直到动画结束

Question

编辑:我现在意识到只有当用户在延迟时间内将鼠标悬停在文本上时才会发生颜色变化。我怎么能延迟悬停功能，直到动画已经停止?

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

均在加载后淡出，侧边栏略后。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
    });
});

Answer 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);
});