I am looking to fade text out when the mouse passes over it and
replace it with text that is faded in. My understanding is that this
needs to be done through a callback, as the text needs to fade out
completely before fading in. However, when I try to implement this
idea the content does not fade in, so I must be doing something wrong.
My code is:
<script type="text/javascript">
var Tips = {
ready: function() {
$('ul#SiteNav li').mouseover(
function() {
$(this).find('div.SectionTitle').fadeOut('fast', function
() {
$(this).find('div.Explanation').fadeIn('slow');
});
});
$('ul#SiteNav li').mouseout(
function() {
$(this).find('div.Explanation').hide();
$(this).find('div.SectionTitle').show();
})
}
};
$(document).ready(Tips.ready);
</script>
I left the mouseout part unchanged, as that is an example of what I am
changing from. What happens is that the mouseover text fades out, but
the replaced text does not fade back in. Additionally, the shown text
flashes before fading out if the mouse rolls over the text (as opposed
to the containing box), which is not really a problem, but I am not
understanding why that is happening. All works fine with hide/show.
Full code can be found at http://dripinvesting.org/Default_test.asp.
I am apparently missing something basic, so a pointer to a beginner
would be appreciated.
Cheers -
george
