espandere div altezza onmouseover

Ho bisogno di altezza sul div 50px in modalità predefinita e deve essere modificato su 300px onmouseover. Ho codificato in basso per implementarlo.espandere div altezza onmouseover

<style type="text/css"> 
#div1{ 
height:50px; 
overflow:hidden; 
} 
#div1:hover{ 
height:300px; 
} 
</style> 
<body> 
<div id="div1"></div> 
</body>

Questo codice funziona correttamente ma, in base alla proprietà CSS su hover, modifica immediatamente l'altezza. Ora, ho bisogno di un modo elegante come espandere lentamente div onmouseover e contrarre onmoveout. Come espandere e contrarre div su hover?

fonte

2012-01-20 Mad coder.

Si potrebbe utilizzare jQuery. Utilizzando la funzione animata. Vedi qui http://api.jquery.com/animate/ – Undefined

Oppure potresti usare le transizioni css (quando disponibili). – biziclop

ci sono alcuni approcci - qui sono i CSS e jQuery, che dovrebbe funzionare in tutti i browser, non solo quelli moderni:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script> 
$(document).ready(function() { 

    $("#div1").hover(
    //on mouseover 
    function() { 
     $(this).animate({ 
     height: '+=250' //adds 250px 
     }, 'slow' //sets animation speed to slow 
    ); 
    }, 
    //on mouseout 
    function() { 
     $(this).animate({ 
     height: '-=250px' //substracts 250px 
     }, 'slow' 
    ); 
    } 
); 

}); 
</script> 

<style type="text/css"> 
#div1{ 
    height:50px; 
    overflow:hidden; 
    background: red; /* just for demo */ 
} 
</style> 

<body> 
<div id="div1">This is div 1</div> 
</body>

fonte

2012-01-20 16:57:25 Dustin

È meglio leggere prima l'altezza originale, perché se si modifica l'altezza tramite CSS, è anche necessario modificare nuovamente il JS, che non è molto pratico (ad esempio può essere dimenticato). – feeela

ok, in tal caso, "height: '+ = 250'" dovrebbe essere impostato su "height: '300px'" – Dustin

Spiacente Dustin, questo codice non ha funzionato :( –

In un browser "moderno", si può solo applicare una css transition effect:

#div1 { 
    -moz-transition: 4s all ease-in-out; 
    -ms-transition: 4s all ease-in-out; 
    -webkit-transition: 4s all ease-in-out; 
    -o-transition: 4s all ease-in-out; 
}

Ciò si applica un effetto di transizione più di 4 secondi con un ease-in-out alleggerimento per firefox compatibile, vale a dire, cromo/safari (WebKit) e browser di opera. Per saperne di più:

CSS Transitions

Si può prendere questo un passo avanti e controllare se il browser corrente supporta le transizioni CSS, se disponibile, li usano per l'animazione e se non utilizzare uno script di animazione javascript. Esempio per questo:

BarFoos animations

fonte

2012-01-20 16:45:39 jAndy

È possibile utilizzare jQuery di .animate() Questo agirà su qualsiasi elemento con con una classe di "scheda", e ritornerà al passaggio del mouse-out.

$('.tab').hover(function() { 
    $(this).stop() 
    $(this).animate({ 
     height: '+=250' 
     }, 500) 

     }, function() { 
    $(this).stop() 
    $(this).animate({ 
     height: '-=250' 
     }, 500)    
})

fonte

2012-01-20 16:46:14

Grazie! questo codice funziona bene ma è in esecuzione su PageLoad. Come eseguire questo codice sumouseover? Mi dispiace chiedere questo tipo di domanda sciocca, ma non so come codificare in jQuery! –

Modificare la risposta. –

Mi dispiace dirlo! questo non ha funzionato. Ho provato come ' 'e come hai detto ho modificato div come

–

#div1{ 
    -webkit-transition: all .3s ease-in-out; 
    -moz-transition: all .3s ease-in-out; 
    -o-transition: all .3s ease-in-out; 
    -ms-transition: all .3s ease-in-out; 
    transition: all .3s ease-in-out; 
}

facile!

fonte

2012-01-20 16:46:15

Wow! awesome! ma come posso diminuire la velocità di scorrimento? –

aumentare .3s a 1s per esempio –

Grazie! Ho provato prima di chiederti ma non ho trovato grande differenza quando cambiato da 3 a 10 è per questo che ho chiesto! Comunque grazie mille –

È possibile utilizzare di jQuery .mouseoverhttp://api.jquery.com/mouseover/, .mouseouthttp://api.jquery.com/mouseout/, e .animate per eseguire questo.

Per l'evento .mouseover, si dovrebbe animare l'altezza a 300px e sull'evento .mouseout si dovrebbe animare a 50px. Assicurati di chiamare .stop sul div prima di chiamare animate, altrimenti avrai problemi dispari.

fonte

2012-01-20 16:46:34 Matthew

espandere div altezza onmouseover

risposta

Problemi correlati