jQuery淡入淡出效果替换div

Question

I've been struggling to find a solution for a fade effect with this script. I'm still learning basic jQuery, but cant seem to figure it out. The script is working fine, the divs are replacing, but with no animation. I have tried fadeToggle, fadeIn and 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');
}

I call the script with onmouseclick. I have about 14 different divs.

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

and to go back:

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

How do I fix this problem?

Answer 1

There are a couple issues in your code, but the one stopping the animation happens because you already changed the display CSS style to block before you call the fadeToggle. Try the code below instead.

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