delay the hover function until after the animation has ceased?

Question

EDIT: i realize now that the color change only happens if the user has hovered over the text during the delay time. how can i delay the hover function until after the animation has ceased?

i am not javascript coder, so im having trouble figuring out what is missing here. i have two divs - sidebar and biotext and this is the behaviour the client wants:

both fadein onload, the sidebar slightly after the bio. after 40 seconds, bio fades to 20%, sidebar fades in to 80%.

then after that the bio only fades in on hover.

right now, all of that is working except for after the 40 seconds, the bio text flashes dark again for 1 second then back to light. im sure it is simple. any thoughts? the divs are not nested at all. using jquery/1.9.1/jquery.min.js

http://www.halamufleh.com/about

thanks!

$(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

I tested the site you provided, it's working as intended. I think you hover on text and it gets messed up, than you can just use good old 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);
});