Aaron - Thanks so much, that works like a champ. I never thought of the fact that the "this" pointer was changing context. Thanks so much for the code and the explanation, that knowledge is very helpful.
Cheers - george On Aug 24, 7:00 pm, Aaron Gundel <[email protected]> wrote: > Hi George, > > It appears that your code isn't working because the context of your > this pointer changes in the callback inside of your fadeout effect. > it becomes your section title. So when you do a find on it, you find > only children of the section title that are of the class explanation > -- which don't exist, hence your problem. Using "siblings" should > solve the issue. Try the following code. Note that I've changed your > mouseove to a mouseleave, since mouseover appears to fire too > frequently. Hope this helps, or at least gets you on your way.... > > function() { > $('li').mouseover( > function() { > $(this).find('div.SectionTitle').fadeOut('fast', function() { > $(this).siblings('div.Explanation').fadeIn('slow'); > }); > }); > $('li').mouseleave( > function() { > $(this).find('div.Explanation').fadeOut('fast', function () { > $(this).siblings('div.SectionTitle').fadeIn('slow'); > }); > }); > } > > Aaron > > On Mon, Aug 24, 2009 at 5:16 AM, GLSmyth<[email protected]> wrote: > > > 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 athttp://dripinvesting.org/Default_test.asp. > > > I am apparently missing something basic, so a pointer to a beginner > > would be appreciated. > > > Cheers - > > > george
