задерживать функцию наведения до тех пор, пока анимация не прекратится?

Question

EDIT: теперь я понимаю, что изменение цвета происходит только в том случае, если пользователь завис над текстом во время задержки. Как я могу отложить зависание до тех пор, пока анимация не прекратится?

Я не javascript-кодер, поэтому им не удалось выяснить, что здесь отсутствует. У меня есть два divs - боковая панель и biotext, и это поведение, которое хочет клиент:

и fadein onload, боковая панель немного после биографии. через 40 секунд, био исчезает до 20%, боковая панель исчезает до 80%.

, после чего био только исчезает при наведении.

прямо сейчас, все это работает, за исключением того, что после 40 секунд биотекст снова мигает темным цветом в течение 1 секунды, а затем возвращается к свету. Я уверен, что это просто. Есть предположения? divs вообще не вложены. с помощью 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); 
});