JQuery Animate работи само веднъж - jquery, css, hover, jquery-animate

Опитвам се да накарам всички divs, които са от .to-be-скрития css клас, да избледнеят, а div с id = "feat-hover" да станат напълно видими, когато задържа курсора над div id = "мисия".

Ето моя код:

$(function() {
$("#mission").hover(function () {
$(".to-be-hidden").stop().animate({opacity: 0.5}, "slow");
$("#feat-hover").stop().animate({"opacity": "1.0"}, "slow");
},
function () {
$(".to-be-hidden").stop().animate({opacity: 1.0}, "slow");
$("#feat-hover").stop().animate({"opacity": "0"}, "slow");
});
});

Ето моят HTML: Замених блоковете текст с искам това да избледнее.

<div id="featured" class="grid col-940">
<div id="left-landing-container" class="left-cont" style="">

<div class="to-be-hidden">
<div class="left-div">want this to fade</div>
<div class="left-div">want this to fade</div>
</div>

<div class="to-be-hidden">
<div class="left-div">want this to fade</div>
<div class="left-div">want this to fade</div>
</div>
</div>

<div id="mission" class="keep-visible">
<div class="left-div" style="padding: 1px 0px 1px 6px; width: 97%;"">Mission Statement</div>
</div>
</div><!-- end of #left-landing-container -->

Скриптите се изпълняват правилно, когато задържам за пръв път и след това не се стартира отново.

Моля помогнете!

Отговори:

Опитайте това, той ще реши проблема ви

$(function() {
$("#mission").hover(function () {
$(".to-be-hidden").each(function( index ) {

$(this).stop().animate({opacity: 0.5}, "slow");
$("#feat-hover").stop().animate({"opacity": "1.0"}, "slow");
});},
function () {
$(".to-be-hidden").each(function( index ) {

$(this).stop().animate({opacity: 1.0}, "slow");
$("#feat-hover").stop().animate({"opacity": "0"}, "slow");
});
});
});