Animate toggle visibility с JQuery

Question

Я переключаю свой Div с помощью следующего кода, но не могу понять, как и как его оживить. Любая помощь будет оценена по достоинству.

Ссылка:

<a href="#" onclick="toggle_visibility('example'); return false;"></a> 

Сценарий:

<script> 

    function toggle_visibility(id) { 
     var e = document.getElementById(id); 
     if(e.style.display == 'block') 
      e.style.display = 'none'; 
     else 
      e.style.display = 'block'; 
    } 
</script> 

Answer 1

Вы помечено jquery, но я не вижу. В чистом JS у вас будет слишком много проблем для достижения этого.

Попробуйте использовать toggle():

function toggle_visibility(id) { 
    $("#" + id).toggle('slow'); 
} 

Кроме того, я хотел бы предложить вам лучше использовать JQuery:

<a href="#" data-toggle="example"></a> 

Код выше использует data attribute, который сочетаем с событием связывания может сделать ваш код гораздо яснее:

$(document).ready(function() 
{ 
    $('a[data-toggle]').on("click", function() 
    { 
     toggle_visibility($(this).data("toggle")); 
    } 
}); 

Теперь все ваши ссылки wi th data-toggle имеют такое же поведение.

Answer 2

Если вы хотите одушевленных это вы можете использовать JQuery и сделать следующий

function toggle_visibility(id) { 
    var e = document.getElementById(id); 
    e.slideToggle('fast'); 
} 

Дополнительная документация по .slideToggle() можно найти здесь: http://api.jquery.com/slidetoggle/

Answer 3

прокатки с рисунком DontVoteMeDown в:

function toggle_visibility(id) { 
    $("#" + id).slideDown("slow"); /* replace this with any of the following */ 
} 

или

$("#" + id).fadeIn(500); 

или

$("#" + id).fadeOut(500); 

Для более сложных анимаций вы можете использовать ослабление, а также. http://easings.net/ .animate (свойства [, duration] [, easing] [, complete])