Question

我有一个带有一些可点击区域的图像地图，当点击图像的certian区域时，计划是.fade在图像下方的相关面板中。

这对于图像地图中的前两个项目非常有用，但是剩下的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小组：

<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

看起来它与'fadeAll'功能混淆了，因为你在'hide'函数中运行'fadeIn'。尝试更换：

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

使用：

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

循环动画问题，jQuery

1 个答案: