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

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

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

jQuery淡化替换div的效果

1 个答案: