シンプルなjQueryアニメーションプラグイン
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
LICENSE
jquery.sanimation.css
jquery.sanimation.js
jquery.sanimation.min.css
jquery.sanimation.min.js
readme.md

readme.md

Simple Animation

超シンプルなページアニメーションを行うjQueryプラグインです。

アニメーションといっても表示と非表示を切り替えるものだけです。

Demo

Download

使い方(How to use)

下記のファイルを読み込んでください。

  • jquery.sanimation.min.css
  • jquery.sanimation.min.js
<link rel="stylesheet" href="jquery.sanimation.min.css">
<script type="text/javascript" src="jquery.sanimation.min.js"></script>

もちろんjQueryの後ろで読み込んでくださいね!

基本的な使い方

$("body").s_animation({
	mode: "fadeOut"
});

高度?な使い方

$(".info").s_animation({
	mode: "fadeOut-up",
	remove: true,
	callback: function (){
		// コールバック
	}
});

オプション(Option)

キー 説明 初期値
mode アニメーションのモード設定です。
モード一覧を参照してください。
"reset"
duration アニメーションの継続時間の設定です。(ミリ秒) 400
easing アニメーションの継続時間の設定です。 "linear"
remove アニメーションの処理終了後に要素を削除するかの設定です。 false
callback アニメーションの処理終了後に呼ばれるメソッドです。 function(){}

仕様

durationはCSS3のプロパティanimation-durationにミリ秒(ms)として設定されます。

duration500未満の場合、animation-durationにはdurationが設定されますが、処理終了時間は500ミリ秒後になります。

easingはCSS3のプロパティanimation-timing-functionにそのまま設定されます。

参考

モード(Mode List)

表示(Show)
  • fadeIn
  • fadeIn-up
  • fadeIn-down
  • zoomIn-show
  • zoomOut-show
非表示(Hide)
  • fadeOut
  • fadeOut-up
  • fadeOut-down
  • zoomIn-hide
  • zoomOut-hide
その他(Other)
  • reset
    • 要素についているSimple Animation用のclassをすべて削除する

著者(Author)

Reona Oshima (totoraj)

ライセンス(License)

Copyright © 2015 Reona Oshima (totoraj)
This work is released under the MIT License.
http://opensource.org/licenses/mit-license.php