1

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

});
4

1 回答 1

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);
});
于 2013-05-18T18:23:37.223 回答