相変わらず限定的なメモ覚書ですが、jQueryのフェードアウトでつまずいたので自戒メモです。

こんな感じで「右にシュッと消える」要素をjQueryで実装します。

そのままfadeoutだと動きがないし、animeteを使ったwidth:hideもちょっと違う…
ということでCSSとの併せ技でこんな感じに設定しました。

CSS：
#object{
opacity: 0;
transition: .8s;
margin-left: 100px;
}

#object.showUp {
opacity: 1;
margin-left: 0;
}

JQ：
$(‘#object’).toggleClass(‘showUp’);
※クリックファンクションの中などに記述

ボタンで切り替えするデモ

まだまだcss3やアニメーションに苦労することが多いので試行錯誤しながら進めてます。