JavaScriptを使ったフェードインアニメーション

jQueryを使った横からフェードインするアニメーション効果です。
軽量なものなので、他のJavaScriptと組み合わせても可能です。

CSSでのposition配置をJavaScriptで制御しています。

まずは、HTMLからですが、

<div id="wrapper">
<p id="inner_anime">ここに動かしたいものを挿入</p>
</div>

jQueryは、ver2.1.1.min.jsを使用しました。

<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
		//アニメーションさせる    {marginLeft : '500px'}がアニメーションによる移動距離です
		$('#inner_anime').animate({marginLeft : '500px'} , 2000 , 'swing' , function(){
		});
});
</script>

そして、CSSでは、任意の要素をpositionでマイナスの位置に置いてます。

<style type="text/css">
#wrapper {
	position: relative;
}
#inner_anime {
	position: absolute;
	top: 100px;
	left: -500px;
	width: 400px; 
	height: 267px;
}
</style>