Mostra nascondi div con animazione

Question

Ho fatto questo script, che apre un div con la classe giusta e chiude gli altri.

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

È possibile effettuare alcune animazioni, come il fadout, easyout invece di mostrarlo solo tramite le opzioni di visualizzazione?

Answer 1

Si potrebbe provare questo

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

Date un'occhiata a questo violino "http://jsfiddle.net/9jtd3/"

Ci sono molte altre tecniche fornite dalla libreria jQuery, si dovrebbe dare un'occhiata a quello anche.

Answer 2

È possibile farlo utilizzando una libreria come jQuery o qualcosa del genere.

Si può sicuramente farlo usando un semplice javascript, ma non ha senso farlo poiché jQuery è una libreria incredibile.

vedere alcuni esempi di show e hide

Answer 3

This sicuramente risolvere il problema.

Puoi usare .fadeOut() direttamente se hai incluso la libreria jQuery nel tuo script.

Answer 4

Se si sta utilizzando jQuery poi un altro modo per fare questo è

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

Supponendo "hideable", come className nel tuo gruppo di div

Buona fortuna.

Answer 5

Questo è molto più semplice con solo CSS.

si effettua una classe

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

.hidden { 
display:none; 
} 

E con javascript, applicare o rimuovere la classe di nascosto quando si vuole. La lib di animazione di jQuery è molto lontana dal bene da usare. È rozzo, e mangia risorse per il tuo utente. Il CSS funziona invece con la tua GPU, consentendo un'animazione più fluida.

Answer 6

È possibile utilizzare slideDown() and slidUp() di jQuery

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