デフォルトでは swing と linear ですが、jQuery Easing Plugin でたくさん使えるようになります。但し、swing は jswing に名前が変更されて、swing は書けるようですが、jQuery.easing.def を変更すると out of memory のエラーが 出たりするので、デフォルトである easeOutQuad は、swingと殆ど同じなのであまり気にせずに使うといいと思います。 ※ しかし、どうも out of memory の挙動(IE8ですが)がたまにあるので、無理に ※ プラグインしない、という選択肢もあります。 その効果をグラフで示しておられるのが jQuery Easing - jQuery 日本語リファレンスで、その意味かよく解るようになっています。このページの jQuery は、jquery-1.3.min.js でしたが、1.6.2 でも動いています。 ( そもそも、easing はプラグインなので、影響無いように作られています )テフォルトの easing
<script>
if ( !window.jQuery ) {
document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");
}
</script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<input type="button" value="アニメーション" onclick='jqAction()'>
テフォルトの easing <input id="def" type="text" />
<div style='position:relative;height:150px;'>
<img
id="target"
src="http://lightbox.on.coocan.jp/image/webtoolbox_gb.png"
width="442"
height="121"
style='
position: absolute;
left: 10px;
'
/>
</div>
<script type="text/javascript">
// デフォルトは easeOutQuad
// ※ swing とほぼ同じ効果
$('#def').val(jQuery.easing.def);
function jqAction() {
$('#target').animate(
{
// あるものを 0 にしたり、無いものを元に戻します
// ( いったん見えなくなります )
opacity: ['toggle', 'easeInCubic'],
width: ['-=200', 'easeInElastic']
},
1000,
function() {
// 見えなくなった後、元へ戻します
$('#target').animate(
{
opacity: 'show',
width: '+=200'
},
1000,
function() {
// 一番最後に表示
$('#def').val(jQuery.easing.def);
}
);
}
);
}
</script>
|
|
【jQueryの最新記事】
- jQuery の $.get を使用した ajax のテンプレート
- jquery.balloon.js を使用した簡単なバルーン( マウスオーバーで表示する追加説明用 )の作り方
- jQuery による link 要素の追加と削除を bootstrap.css でリアルタイムチェック
- FileReader で、ローカルの CSV を読み込んで(shift_jis)、jQuery でテーブルを作成して表示する
- jQuery + bootstrap.js で ajax の GET と POST を使用した DB テーブルを更新する UI テンプレート
- jQuery : 貼り付けるだけで、ページ右下にページ先頭にジャンプするリンクを表示させる( アニメーションは無し )
- STYLE 要素を追加して、CSS テキストをセットして、jQuery で CSS に important 指定を追加する。
- ページの右下に、ページの先頭へ移動するボタンを追加する(ページの先頭から 200px までは、スクロールボタンを表示しない)
- テーブルのTDをクリックしたら、INPUT で値を変更可能にして、元の値と違うものにはフラグを立てる処理を絵で書いて説明してみました
- jQuery を使用してサーバから取得した JSON データを元にテーブルを作成し、その後から列を加工する
- JSON 配列を WEB より読み出して jQuery で動的にテーブルを作成して表示する
- jQuery UI の Datepicker Widget のオプション
- FormData を使用して、jQuery で配列として PHP に送る
- 必要なデータを隠しリストボックス( multiple ) に jQuery で追加して配列として PHP に送る
- Android Studio の追加日本語化用に、キャラクタセットに依存しないコード文字列を作成するツールを作成しました
- 画像ファイルが存在した時のみ、表示する jQuery の記述
- jQuery で mobile(スマホ) かどうかのチェックをしたくて調べたら、Stack Overflow の記事でいろんな方法が答えられていました。
- jQuery と FileReader オブジェクトによる、ローカルの複数画像ファイルのプレビュー表示
- とても面白くて簡単な jQuery のクリックしたコンテンツ以外を暗転(Blackout) するサンプル
- jQuery で、左右に並んだリストボックスの右側のデーターをダブルクリックしたら左へ転送してソートする処理
