jQuery эффект затухания при замене divs

Question

Я пытаюсь найти решение для эффекта fade с помощью этого скрипта. Я все еще изучаю базовый jQuery, но, похоже, не понимаю его. Скрипт работает нормально, divs заменяют, но без анимации. Я пробовал 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

В коде есть пара вопросов, но остановка анимации происходит, потому что вы уже изменили стиль CSS для CSS до block, прежде чем вы вызовете fadeToggle. Вместо этого попробуйте использовать код ниже.

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