jQuery Transitスムーズプラグイン

Super-smooth CSS3 transformations and transitions for jQuery — v0.1.1
このJSをダウンロード(圧縮されていません)
14 kb完成品ダウンロード(圧縮版)
2kb gzipped
How to use
このプラグインはjQuery 1.4+のバージョンサポートが必要で、本プログラムのJSファイルを参照するだけで$('...')を使用できます.transition法はjQueryの$('......')に取って代わった.animateメソッドでこのプラグインを使用します.このメソッドの構文はjQueryanimate.一致を保つ.
移動(Translate)
マウスをサンプルに移動して効果を確認します.
水平移動

$('.box').transition({ x: '90px' });

垂直移動

$('.box').transition({ y: '30px' });

異方性移動

$('.box').transition({ x: '200px', y: '20px' });

使用可能な移動方法
この方法は以下の移動方法をサポートする.詳細は、このREADMEドキュメントを参照してください.
x(px) 
y(px) 
translate(x, y)
rotate(deg) 
rotateX(deg) 
rotateY(deg)
rotate3d(x, y, z, deg) 
scale(x, [y]) 
perspective(px)
skewX(deg) 
skewY(deg)
回転
回転

$('.box').transition({ rotate: '30deg' });

ツイスト(Twist)
水平ツイスト(Horizontal Twist)

$('.box').transition({ skewX: '30deg' });

垂直ツイスト(Vertical Twist)

$('.box').transition({ skewY: '30deg' });

[異方性](Anisotropic)ツイスト

$('.box').transition({
    skewX: '30deg',
    skewY: '-30deg'
});

拡大
120%に拡大

$('.box').transition({ scale: 1.2 });

水平方向に200%、垂直方向に150%拡大

$('.box').transition({ scale: [2, 1.5] });

3 D回転(Webkitカーネルブラウザのみ)
rotateXとrotateYを使用して回転変換を実現できます.perspectiveプロパティはオプションですが、rotateX/Yプロパティの後にこのプロパティを設定するのが一般的です.
水平回転

$('.box').transition({
    perspective: '100px',
    rotateX: '180deg'
});

垂直回転

$('.box').transition({
    perspective: '100px',
    rotateY: '180deg'
});

3 D回転

$('.box').transition({
    perspective: '100px',
    rotate3d: '1, 1, 0, 180deg'
});

その他のアトリビュート変換
サポートされているCSSプロパティを任意にアニメーション化できます.
$.fn.Transitionは任意のCSS属性に使用できます

$('.box').transition({
    opacity: 0,
    scale: 1.6
});

$('.box').transition({
    marginLeft: '20px',
    height: '80px'
});

コールバック
$.fn.transition(options, [duration], [easing], [callback]); $.fn.transitionと$fn.animateの動作は一致しています.duration,easing,and callbackパラメータを渡すことができます.
コールバックの提供

$('.box').transition({ x: -100 }, function() {
    $(this).transition({ opacity: 0 });
});

速度のカスタマイズ
カスタムスピード(jQueryスタイル)

$('.box').transition({ opacity: 0 }, 'slow');

カスタム速度(ミリ秒単位)

$('.box').transition({ opacity: 0 }, 2000);

直線移動速度グラデーションエフェクト
$をあげるだけです.fn.Transition関数は3番目のパラメータを提供すればよい
線形

$('.box').transition({ x: 330 }, 500, 'linear');

インボリュート

$('.box').transition({ x: 330 }, 500, 'in');

スローシフト

$('.box').transition({ x: 330 }, 500, 'ease');

インボリュート

$('.box').transition({ x: 330 }, 500, 'out');

インボリュート-インボリュート

$('.box').transition({ x: 330 }, 500, 'in-out');

スナップシフト

$('.box').transition({ x: 330 }, 500, 'snap');

ツールバーの

$('.box').transition({ x: 330 }, 500, 'cubic-bezier(0,0.9,0.3,1)');

ちえん
遅延400 ms

$('.box').transition({ x: -100, delay: 400 });

グラデーション/継続構文を交互に使用
Great for CoffeeScript.の代わりにeasing and durationパラメータを提供できます.

$('.box').transition({
    x: '100px',
    easing: 'snap',
    duration: '2000ms'
});

オプション単位
すべての単位(px,deg,ms,etc)はオプションです.

$('.box').transition({
    x: 100,
    duration: 2000,
    rotate: 30,
    easing: 'snap'
});

相対単位
このプラグインはjQueryスタイルの相対単位と互換性がある.あなたの値を先頭に+=or-=を使用します.

$('.box').transition({
    rotate: '+=30deg',
    x: '+=30'
});

$.fn.css
CSS 3は、$を通過するもよい.fn.css呼び出し

$('.box').css({
    x: '90px',
    y: '10px',
    rotate: '-10deg'
});

変換(接頭辞を自動的に追加)

$('.box').css({ transform: 'rotate(40deg)' });

値の表示

$('.box').css({ rotate: '40deg' });
alert($('.box').css('rotate'));
alert($('.box').css('transform'));

Run
変換の開始値を設定
$を通過する.fn.css、変換の開始値を設定できます.書式は“x y”, ここで、xおよびyは、所与の座標要素である.

$('.box').css({ transformOrigin: '10px 10px' });
$('.box').transition({ rotate: 40, scale: 1.2 });

キュー化連続アクション
プラグインのデフォルトはjQueryのeffect queue特性、例えば$を適用する.fn.animateメソッド.これは、これらの動作が同時にトリガーされないことを意味します.

$('.box').
    transition({ x: '-40px' }, 250).
    transition({ x: '0px' }, 250).
    transition({ y: '-40px' }, 250).
    transition({ y: '0px' }, 250);

あるスタイルから別のスタイルへの移行
css and transitionを接続して使用できます(例えば.css({.}).transition({ .. })) .

$('.box').
    css({ x: '-800px' }).
    transition({ x: 0 });

ブラウザの互換性
IE 10+ 
Firefox 4+ 
Safari 5+ 
Chrome 10+ 
Opera 11+ 
Mobile Safari
CSSグラデーションについてはcaniuseを参照してください.com’sサイト.Mobile Safariブラウザと互換性を持つためにjQueryはtranslate 3 d and scale 3 dメソッドを使用した.
古いブラウザは?
jQueryが古いバージョンのブラウザと互換性を持つ方法は簡単です.それは、rotate、scale、etcなどのグラデーション効果をレンダリングしないが、その変化後の効果(opacity、marginLeft、etcなど)を保持することです.同様に、遅延もキャンセルされました.
フレームベースのアニメーションに戻る
ブラウザでグラデーションがサポートされていない場合、従来のフレームベースのグラデーションに変更すると、同じ方法が提供されます(一般的には、速度が低下するため、推奨されません):

//    .transition()     .animate()
//             。
if (!$.support.transition)
    $.fn.transition = $.fn.animate;

デフォルトの設定

//         $.fn.animate.   。
$.fx.speeds._default = 300;

//    easing     $.cssEase.
$.cssEase._default = 'snap';

カスタムグラデーション
$.cssEaseで値を変更

$.cssEase['bounce'] = 'cubic-bezier(0,1,0.5,1.3)';
$('.box').transition({ x: 0 }, 500, 'bounce');

ソースコード
コメントとソースコードを表示します.まだ
GitHubでフィードバックを表示
著作権