Question

I have the following code:

// Hide all divs that are not the default
                $('div.apps-description > div').not('.default').hide();

                // When an icon is hovered
                $('ul.apps-links li a').hover(function() {

                    var liClass = $(this).parents('li').attr('class');

                    $('div.apps-description > div:visible').fadeOut('fast', function() {
                        $('div.' + liClass).fadeIn('fast');
                    });

                },function()
                {
                    $('div.apps-description > div:visible').fadeOut('fast', function() {
                        $('div.apps-description > div.default').fadeIn('fast');
                    });
                });

And the markup is for example:

<ul class="apps-links">
    <li class="app-one"><a href="./">Test</a></li>
    <li class="app-two"><a href="./">Test</a></li>
    <li class="app-three"><a href="./">Test</a></li>
</ul>

<div class="apps-description">
    <div class="default">Default Content</div>
    <div class="app-one">Default Content</div>
    <div class="app-two">Default Content</div>
    <div class="app-three">Default Content</div>
</div>

The idea is that the default div is show on page load, and then when you hover an item it fades out the default and the linked div based on its matching class. This all works fine except if I hover over to another link before it’s properly faded out again it will cause BOTH the default and the new div to show!

Any ideas how to fix this? I tried using .stop() but that just causes animations to breaks as they stop mid fade and append crappy opacity values.

EDIT: Also noticed that if I hover through all the link it will cause all the divs to show up, but they will then auto-fix themselves. So it’s clearly an issue with the fadein and outs happening in bad sequence with each other.

Answer 1

Try this:

var target_class = 'default';
$('div.apps-description > div').not('.default').hide();

// When an icon is hovered
$('ul.apps-links li a').hover(function() {

        target_class = $(this).parents('li').attr('class');

        $('div.apps-description > div:visible').fadeOut('fast', function() {
            $('div.' + target_class).fadeIn('fast');
        });

}, function() {
    target_class = 'default';
    $('div.apps-description > div:visible').fadeOut('fast', function() {
        $('div.' + target_class).fadeIn('fast');
    });
});

Using a global “target_class” will avoid several items showing as just one is the target.