JavaScriptを使用しないと、CSSトランジションを使用することができます。これらはかなり印象的ですが、条件付きアニメーションについてはまだわかりません。基本的に開始点から別の点までアニメートしてから戻ってくることができます（ブラウザ自体で利用可能なネイティブブラウザイベントに基づいて）。JSを使用すると、追加のクラスを追加/削除し、div要素をあなたの心のコンテンツに移動できます「ただの」CSSではなく（私はこれについて間違っていることを証明したいと思うが）。
私はこれまでのところ、思い付くことができました最高です：
#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。
これは、要素の幅が変更されたときに起こっていたコンテンツの再リフローを考慮すると、見た目が良くなかったため、側面からスライドしません（ただし、できます）。
私はjavascriptの
なしたい場合ということ...：私は、私は元の質問の一部を誤解しているかもしれないと思うので、
はを編集しますjQueryは大丈夫だと示唆しているようですが、これはデモとして価値があるかもしれません：
$('#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。
参考文献：
最初のフィドルはちょうど良いです。私はあなたが提案したようにスクリプトを追加する前に私のCSSを作成することを確認します。これで私の人生はずっと楽になりました - ありがとう！ ：D –
あなたが何をしたいか考えて、それに応じて要素をCSSに配置して、必要なときにすぐに開始できる最適な位置に配置します。 – sg3s
ここで私はこれまでのCSSの賢明さを持っているものを持っています：http://jsfiddle.net/bridget_kilgallon/sMDyB/4/フィドルはうまく動作しますが、トランジションはDreamweaverで動作していません。もう一度ありがとうございます-BK –