2012-10-26 13 views
6

Sto usando Javascript per espandere un div, ma quando il contenuto viene espanso è altamente brusco e nel migliore dei casi altamente poco attraente. Mi stavo chiedendo se ci fosse un modo per far sì che questo div si espandesse più lentamente e più espandendo visivamente poi un BLAM. Ora ho finito.Crea Div Espandere uniformemente

<script language="javascript"> 
function toggle_profile() { 
    var ele = document.getElementById("toggleProfile"); 
    var text = document.getElementById("displayProfile"); 
    if(ele.style.display == "block") { 
      ele.style.display = "none"; 
     text.innerHTML = "View Profile"; 
    } 
    else { 
     ele.style.display = "block"; 
     text.innerHTML = "Hide Profile"; 
    } 
} 
         </script> 

         <a id="displayProfile" href="javascript:toggle_profile();">View Profile</a></p> 
         <br /> 
        <div id="toggleProfile" style="display: none"> 
+0

è sicuramente possibile, ma se si sta utilizzando pianura JavaScript che avrebbe dovuto creare l'animazione te modificando la larghezza o l'altezza utilizzando una sorta di timer. Consiglierei un framework come jQuery se vuoi fare qualcosa di simile. Lo rende molto più facile. – j08691

+0

perché non usi jquery? non ti aiuterebbe almeno a scrivere il tuo esempio un po 'più facilmente? – ChuckE

risposta

3

Non c'è davvero alcun motivo per reinventare la ruota. Puoi farlo abbastanza facilmente con lo slidetoggle di Jquery. Ecco la pagina: http://api.jquery.com/slideToggle/

17

Il trucco è con collegamento e la rimozione classi in Javascript ... e allegando una transizione CSS3 come questo:

div { 
    -webkit-transition: height .25s ease; 
     -moz-transition: height .25s ease; 
      transition: height .25s ease; 
} 

Questo vale una transizione è possibile controllare la velocità di a tutti i tuoi div. Ovviamente puoi selezionare quali elementi DOM applicarli a te stesso.

E poi le due funzioni jQuery userei sono

$("#object").addClass("removeThis"); //hide 
$("#object").removeClass("removeThis"); //show 

Ma, come sottolineato E 'vietato utilizzare jQuery! Ecco!

document.getElementById("object").className = ""; 
document.getElementById("object").className = "removeThis"; 

Dove "#object" è l'oggetto si prendono di mira, e ".removeThis" è la classe che si sta aggiungendo e rimuovendo dal attributo class nel tag dom. Ecco come appare in css.

#object { 
    height: 200px; 
    /* ignoring other CSS */ 
} 

.removeThis { 
    height: 0; 
} 

Supponendo che si desideri scorrere verso l'alto e verso il basso. Un altro trucco è usare l'opacità o visualizzare: none e display: block. Ma giocare. Spero che aiuti!

Modifica dal 2012: Dal momento che si sta utilizzando JavaScript, si sta chiedendo che il lavoro venga eseguito sul thread principale, è possibile utilizzare il thread di composizione animando invece una trasformazione. Questo è se riesci a capire come allontanarti dall'animazione della proprietà di stile dell'altezza.

+0

Sarebbe fantastico se tu avessi aggiunto javascript non funzionante, dal momento che non c'è bisogno di jquery per aggiungere/rimuovere classi e utilizzare le transizioni CSS3 (e l'OP non ha taggato jquery). – rgthree

+0

Questo è un buon punto, salterò su quello. – Jim

+0

Non mi rendevo conto che i CSS sono stati implementati in modo nativo in c/C++. buona risposta! –

0

Penso che il miglior trucco sia usare la proprietà CSS overflow:hidden nella divisione. Ciò nasconderà il contenuto che si trova fuori dall'altezza o dalla larghezza div. Quindi puoi facilmente aumentare e diminuire l'altezza della divisione con una transizione CSS fluida.

Si può leggere the tutorial here

Problemi correlati