jQuery hover fade p tag out and fade another in

Question

У меня проблема с тем, чтобы это работало. У меня есть 3 модуля с id # mod1, # ​​mod2, # mod3. Когда вы наводите на них курсор, я хочу, чтобы они исчезли из видимого тега P и исчезли в другом.

<ul id="homeModules"> 
    <li id="mod1"><a href="/portfolio/">VIEW OUR GALLERY</a></li> 
    <li id="mod2"><a href="/about/">MEET SARAH</a></li> 
    <li id="mod3"><a href="/become-a-client/">BECOME A CLIENT</a></li> 
</ul> 

<p class="homeTags" id="homeTag1">Lorem ipsum dolor sit amet.</p>    
<p class="homeTags" id="homeTag2">The Google Fonts API will.</p>     
<p class="homeTags" id="homeTag3">Check out more advanced techniques.</p> 

#homeTag2, #homeTag3 { 
    display: none; 
} 

$('#mod1').hover(function(){ 
    $('#homeTag2,#homeTag3').fadeOut(250); 
    setTimeout(function(){ 
     $('#homeTag1').fadeIn(250); 
    }, 500); 
}); 

$('#mod2').hover(function(){ 
    $('#homeTag1,#homeTag3').fadeOut(250); 
    setTimeout(function(){ 
     $('#homeTag2').fadeIn(250); 
    }, 500); 
}); 

$('#mod3').hover(function(){ 
    $('#homeTag1,#homeTag2').fadeOut(250); 
    setTimeout(function(){ 
     $('#homeTag3').fadeIn(250); 
    }, 500); 
});