Bez użycia JavaScriptu ograniczasz się do używania przejść CSS, jeśli są dostępne. I choć są one imponujące, nie są szczególnie dobre, o ile już znalazłem, dla warunkowej animacji; mogą zasadniczo animować od punktu początkowego do innego punktu, a następnie z powrotem (w oparciu o macierzyste zdarzenia przeglądarki dostępne w samej przeglądarce), z JS można dodawać/usuwać dodatkowe klasy i elementy div poruszać się do treści serca, ale nie z "po prostu" CSS (choć chciałbym, aby się na tym nie udowodniono).
Najlepszą udało mi się wymyślić, jak dotąd, jest:
#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.
A to nie zsuwa się z boku (choć możesz to zrobić, jeśli chcesz), ponieważ nie wyglądało dobrze, biorąc pod uwagę ponowne przepłynięcie zawartości, które miało miejsce w miarę zmiany szerokości elementu.
Zmieniano, ponieważ myślę, że może być błędnie interpretowane część pierwotnego pytania:
... Chciałbym bez javascript
Skoro tak , a komentarz (poniżej) wydaje się sugerować, że jQuery jest opcją w porządku, może to być warte uwagi jako demonstracja:
$('#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.
Odniesienia:
Pierwsze skrzypce są w sam raz. Dopilnuję, aby utworzyć moje css przed dodaniem skryptu zgodnie z sugestią. To właśnie ułatwiło mi życie - dziękuję bardzo! : D –
Zastanów się, co chcesz zrobić i odpowiednio ustaw swoje elementy w css, aby znajdowały się w najbardziej optymalnej pozycji do rozpoczęcia, gdy tylko zajdzie taka potrzeba. – sg3s
Oto skrzypce z tym, co mam do tej pory css mądre: http://jsfiddle.net/bridget_kilgallon/sMDyB/4/ skrzypce działa dobrze, ale przejścia nie działają w Dreamweaver .. Jakieś pomysły? Jeszcze raz dziękuję -BK –