Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 

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

About

シンプルなjQueryアニメーションプラグイン

Resources

License

Packages

No packages published