【JS】よくわかるJavascriptの教科書3

jQueryのアニメーション（特定のオブジェクト？を動かす関数）を試しました。 stopの第二引数の変えた時の動作を確かめるために動きが多少ややこしくなっています。 サンプル ** css

|css|

news {

width: 300px; border-radius: 8px; -webkit-border-radius: 8px; -mozborder-radius: 8px; background-color: #ffc2d7; padding: 15px; position: absolute; left: 210px; top: 30px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); } ||< この辺はまだまだおまじない的に写しているだけなので、今後要勉強ということで。 ** html |html|

このページをブックマークしておくと次回から便利にご利用いただけます。

||< わりとどうでもいい ** js

|javascript| $('#news') .css({ 'top': '-100px' }) .animate({ 'top': '100px' }, 1000) .animate({ 'top': '90px' }, 500) .delay(1000) .fadeOut('slow') .fadeIn('slow');

$('#news').bind('click', function() { $(this).stop(true, false).fadeOut('slow'); }); ||< animate 対象を現在ある場所から指定された場所に動かします。 サンプルは上下しか動かさないのでtopのみを指定しています。初期位置を画面外に設定してフェードイン的な動きを再現してる。 stop クリック時やフォーカスイン・アウト時の動作で、他の動きに割り込むときはstopを使います。引数をいじったときの動作は下記サイトにわかりやすくまとまっています。 jQuery入門講座 使い方-stopメソッド(2) いきなり今の状態でわりこんだり今の処理は最後の状態までスキップしてわりこんだりできるんですね！

スクロールするとメニューがついてくる、みたいな演出もaniate使えば簡単にできそうですね！