循环动画问题，jQuery

我有一个带有一些可点击区域的图像地图，计划是当点击图像的某些区域时，在图像下方的相关面板中淡入淡出

这对于图像地图中的前两个项目非常有效，但是剩余的4个项目似乎会快速出现、淡出，然后再次淡入。。我一辈子都搞不懂为什么会这样

下面是我的代码和HTML。。我知道这可能会成为一件非常愚蠢的事情，但我现在看不到这个问题

谢谢

戴夫

我的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');
        });

    }); 

图像映射：

<img id="journeyMap" src="http://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>

我的分区面板：

<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>

获得
保留
膨胀
维修
丢弃
重新激活

它似乎与“fadeAll”函数混淆了，因为您正在“hide”函数中运行“fadeIn”。尝试替换：

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

与：

---

为了完整起见，你介意分享图片吗？如果你喜欢的话就上传到imgur。好的，我已经上传了图片并更新了上面的代码。还有一些改进。很棒的演示@Marcel。作为旁注，我可能会用一个带有您正在使用的图片的背景图像，position:relative来实现UI。我会让他们把按钮放在绝对位置。这将允许您为图表创建滚动和其他样式，为用户提供更多的反馈。jquery将以完全相同的方式实现。哇，这是一个非常明显的错误，现在我知道了。谢谢@ckaufman我们都偶尔做：）很高兴我能帮忙。

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