Pokaż ukryj div z animacją

Question

Zrobiłem skrypt, który otwiera div z właściwą klasą i zamyka pozostałe.

function showhide(id) { 
    if (document.getElementById) { 
    var divid = document.getElementById(id); 
    var divs = document.getElementsByClassName("hideable"); 
    for (var i = 0; i < divs.length; i = i + 1) { 
     divs[i].style.display = "none"; 
    } 
    divid.style.display = "block"; 
    } 
    return false; 
} 

Czy to możliwe, aby zarobić trochę animacji, jak fadout, easeOut zamiast tylko pokazano go przez opcje wyświetlania?

Answer 1

można spróbować to

function showhide(id) { 
    if (document.getElementById) { 
    var divid = document.getElementById(id); 
    var divs = document.getElementsByClassName("hideable"); 
    for (var i = 0; i < divs.length; i = i + 1) { 
     $(divs[i]).fadeOut("slow"); 
    } 
    $(divid).fadeIn("slow"); 
    } 
    return false; 
} 

Wystarczy popatrzeć na to ryba „http://jsfiddle.net/9jtd3/”

Istnieje wiele technik świadczone przez biblioteki jQuery, należy spojrzeć na to zbyt.

Answer 2

Możesz to zrobić przy użyciu biblioteki takiej jak jQuery lub coś podobnego.

Możesz na pewno zrobić to używając zwykłego javascript, ale nie ma sensu robić tego, ponieważ jQuery jest niesamowitą biblioteką.

Zobacz kilka przykładów show i hide

Answer 3

This pewnością rozwiąże Twój problem.

Możesz użyć .fadeOut() bezpośrednio, jeśli dołączyłeś bibliotekę jQuery do swojego skryptu.

Answer 4

Jeśli używasz Jquery następnie inny sposób to zrobić jest

function showhide(id) { 
    $(".hideable".fadeOut("slow"); 
    $("#" + id).fadeIn("slow"); 
} 

Zakładając "hideable" jako className w swojej grupie div

Powodzenia.

Answer 5

To jest łatwiejsze dzięki tylko CSS.

dokonaniu klasa

div { 
display:block; 
transition: all .2s ease-out; 
} 

.hidden { 
display:none; 
} 

I z javascript, zastosować lub usunąć klasa ukryty kiedy chcesz. jQuery lib jest nieporównywalnie dobra do użycia. Jest przyziemne i jedzenie zaspokaja potrzeby użytkownika. CSS zamiast tego pracuje z twoim GPU, pozwalając na bardziej płynną animację.

Answer 6

Można użyć slideDown() and slidUp() jQuery

$(document.body).click(function() { 
    if ($("div:first").is(":hidden")) { 
    $("div").slideDown("slow"); 
    } else { 
    $("div").slideUp("slow"); 
    } 
});