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<george.sm...@gmail.com> 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 at http://dripinvesting.org/Default_test.asp.
>
> I am apparently missing something basic, so a pointer to a beginner
> would be appreciated.
>
> Cheers -
>
> george
