Question

I have an image map with some clickable areas, and the plan is to .fadeIn the relevant panel below the image when certian areas of the image are clicked.

This works great for the first two items in the image map, but then the remaining 4 seem to quickly appear, fade out, and fade back in again.. I can’t for the life of me figure out why this is.

My code and HTML is below.. I know this is probably going to end up being something really stupid, but i just can’t see the issue right now.

Thanks,

Dave

My jQuery:

    $(document).ready(function () {

        function hideall() {
            $('.slider').hide();
        }

        function fadeAll(divclass) {
            $('.slider').hide(function () {
                $(divclass).fadeIn(500);
            });
        }

        hideall();          

        $('.acquisition').click(function () {
            fadeAll('.acq-text');
        });


        $('.retention').click(function () {
            fadeAll('.ret-text');
        });


        $('.expansion').click(function () {
            fadeAll('.exp-text');
        });


        $('.maintenance').click(function () {
            fadeAll('.mai-text');
        });


        $('.discard').click(function () {
            fadeAll('.dis-text');
        });


        $('.reactivation').click(function () {
            fadeAll('.rea-text');
        });

    }); 

Image Map:

<img id="journeyMap" src="https://i.stack.imgur.com/xif3h.jpg" usemap="#journey" border="0" width="593" height="268" alt="" />
<map id="journey" name="journey">
    <area shape="rect" coords="70,162,86,179" href="#ani" alt="Acquisition" title="Acquisition" class="acquisition" />
    <area shape="rect" coords="136,93,163,120" href="#ani" alt="Retention" title="Retention" class="retention"/>
    <area shape="rect" coords="225,61,252,88" href="#ani" alt="Expansion" title="Expansion" class="expansion"/>
    <area shape="rect" coords="323,55,340,72" href="#ani" alt="Maintenance" title="Maintenance" class="maintenance"/>
    <area shape="rect" coords="414,79,437,104" href="#ani" alt="Discard?" title="Discard?" class="discard"/>
    <area shape="rect" coords="487,140,510,165" href="#ani" alt="Reactivation" title="Reactivation" class="reactivation"/>
</map>

My Div panels:

<div class="slider acq-text">
    <h1>Acquisition</h1>
</div>

<div class="slider ret-text">
    <h1>Retention</h1>
</div>

<div class="slider exp-text">
    <h1>Expansion</h1>
</div>

<div class="slider mai-text">
    <h1>Maintenance</h1>
</div>

<div class="slider dis-text">
    <h1>Discard</h1>
</div>

<div class="slider rea-text">
    <h1>Reactivation</h1>
</div>

Answer 1

It looks like it is getting confused with the ‘fadeAll’ function because you are running the ‘fadeIn’ within the ‘hide’ function. Try replacing:

    function fadeAll(divclass) {
        $('.slider').hide(function () {
            $(divclass).fadeIn(500);
        });
    }

with:

  function fadeAll(divclass) {
        $('.slider').hide();
            $(divclass).fadeIn(500);
    }