javascript - 替换div时的jQuery淡入淡出效果

Question

我一直在努力寻找fade使用此脚本的效果的解决方案。我仍在学习基本的 jQuery，但似乎无法弄清楚。脚本运行良好，div 正在替换，但没有动画。我尝试过fadeToggle、fadeIn 和fadeOut。

function HideContent(d) {
    if(d.length < 1) {
        return;
    }
    document.getElementById(d).style.display = "none";
}

function ShowContent(d) {
    if(d.length < 1) {
        return;
    }
    document.getElementById(d).style.display = "block";
    $('#' + d).fadeToggle('slow');
}

我用 onmouseclick 调用脚本。我有大约 14 个不同的 div。

<a  onmouseclick="ShowContent('div1'); return true; "href="javascript:ShowContent('div1')"> Link button </a>

并返回：

<a onmouseclick="HideContent('div1'); return true;" href="javascript:HideContent('div1')"> BACK </a>

我该如何解决这个问题？

Answer 1

您的代码中存在几个问题，但是会发生停止动画的问题，因为您block在调用 fadeToggle 之前已经将显示 CSS 样式更改为。请尝试下面的代码。

function HideContent(d) {
    if(d.length < 1) {
        return; 
    }

    // document.getElementById(d).style.display = "none";
    // replace the above line with:
    // $('#' + d).css('display','none');

    // or even better, fade it out:
    $('#' + d).fadeOut('slow');
}

function ShowContent(d) {
    if(d.length < 1) {
        return; 
    }
    // document.getElementById(d).style.display = "block";
    // You don't need the above, the fadeToggle does this for you.

    $('#' + d).fadeIn('slow');
}