Senza l'uso di JavaScript è possibile utilizzare le transizioni CSS, se disponibili. E mentre questi sono piuttosto impressionanti, non sono particolarmente grandi, per quanto ho ancora trovato, per l'animazione condizionale; possono fondamentalmente animare da un punto di partenza a un altro punto e quindi tornare (in base agli eventi del browser nativo disponibili nel browser stesso), con JS è possibile aggiungere/rimuovere classi aggiuntive e spostare gli elementi div sul contenuto del cuore, ma non con 'solo' CSS (anche se mi piacerebbe essere smentito su questo).
Il meglio che ho potuto venire con, finora, è:
#left {
float:left;
width:200px;
}
.right {
height: 0;
background-color: #fff;
margin-left: 205px;
overflow: hidden;
-webkit-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-moz-transition: all 1s linear;
transition: all 1s linear;
}
.right:target {
display: block;
height: 5em;
background-color: #ffa;
-webkit-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-moz-transition: all 1s linear;
transition: all 1s linear;
}
JS Fiddle demo.
E questo non scorre lateralmente (anche se lo si può fare se lo si desidera) perché non ha un bell'aspetto, dato il contenuto re-reflow che stava accadendo mentre la larghezza dell'elemento cambiava.
Redatta perché penso che forse ho mal interpretato una parte della domanda originale:
... mi piacerebbe senza JavaScript
Stando così le cose , e il commento (sotto) sembra suggerire che jQuery è un'opzione accettabile, potrebbe valere la pena di una dimostrazione:
$('#left a').click(
function(){
var div = $('div').not('#left').eq($(this).index('#left a'));
var others = $('div[data-visible="true"]');
others.each(
function(){
$(this).animate({
'left' : '2000px'
},1000,function(){
$(this).removeAttr('style data-visible');
});
});
if (div.attr('data-visible')) {
div.animate({
'left' : '2000px'
},1000,function(){
$(this).removeAttr('style data-visible');
});
}
else {
div.animate({
'left' : '210px'
},1000).attr('data-visible',true);
}
});
JS Fiddle demo.
Riferimenti:
fonte
2012-03-25 21:52:20
Il primo violino è giusto. Mi assicurerò di creare il mio css prima di aggiungere lo script come suggerito. Questo mi ha reso la vita molto più semplice, grazie mille! : D –
Pensa a cosa vuoi fare e posiziona i tuoi elementi in css di conseguenza in modo che siano nella posizione ottimale per iniziare non appena necessario. – sg3s
Ecco un ragno con quello che ho ottenuto finora css saggio: http://jsfiddle.net/bridget_kilgallon/sMDyB/4/ il violino funziona bene ma le transizioni non funzionano in dreamweaver .. Qualche idea? Grazie ancora -BK –