2011年06月15日 jQuery・javascript
jQueryのfadeOutを使って、クリックされた文字をゆっくり消します。 サンプルも設置しているので、ご確認ください。

サンプル

消える文字(クリックしてください。)

↑クリックすると消えます。戻すにはここをクリックして再読み込みしてください。

設置コード

まずは、htmlソースのhead内でjqueryを読み込みます。
<script type='text/javascript' src='jquery-1.6.1.min.js'></script>
今回の動作を設定している以下のソースをhtmlソース内に適当に配置します。この場合、p.fadeout が宣言されているタグの前でも後ろでも正常に動作したので、場所はどこでもいいのかな。(多分。。)
<script type="text/javascript">
jQuery(function() {
    jQuery("p.fadeout").click(function() {jQuery(this).fadeOut('slow');});
});
</script>
クリックで消したい文字のソースを設置します。
<p class="fadeout">消える文字</p>

この投稿へのコメント

コメントはまだありません。

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CAPTCHA


ピックアップ記事

IE6で透過pngを表示させる。DD_belatedPNG

2012年02月14日 web関連jQuery・javascript
DD_belatedPNG 先日、でも触れましたが、DD_belatedPNGというjavascriptを使って、IE6で透過pngを表示させてみました。 DD_belatedPNGの入手 以下のサイトにいって、DD_belatedPNGをダウンロードします。以下のサイト内を下へスクロールしていくと、左のサイドバーにDD_belatedPNG 0.0.8a releasedというリンクがあり…
「IE6で透過pngを表示させる。DD_belatedPNG」をはてなブックマークに追加

jQuery Auto Heightで各カラムの高さを同じに設定する

2011年06月24日 jQuery・javascript
jQuery Auto Height とは、複数のボックスの高さを自動的にそろえるシンプルな jQueryプラグインです。 3カラムのデザインで高さを調整したいなんて言う場合も多いのではないでしょうか。 …
「jQuery Auto Heightで各カラムの高さを同じに設定する」をはてなブックマークに追加

jQuery でフォームの入力チェックを実装する

2011年08月04日 jQuery・javascript
フォームに入力されたデータを受け取るときに、入力された内容をエスケープすることは、こちらの記事で触れましたが、送信される前にjQueryで入力値のチェックを行えるとページの推移もなく、便利ですよね。 …
「jQuery でフォームの入力チェックを実装する」をはてなブックマークに追加

jQueryでアコーディオンパネル

2011年06月16日 jQuery・javascript
jQueryでアコーディオンパネルを実装してみます。 サンプルも設置してますので、動作の確認が出来ます。…
「jQueryでアコーディオンパネル」をはてなブックマークに追加

safariでowl carouselのスライド時にフォントが細くなる現象の解決策

2015年03月19日 web関連jQuery・javascript
レスポンシブ対応でとても重宝しているowlカルーセルですが、safariでは、スライド時に、フォントが細くなったり、太くなったりして、点滅するような現象が起こっていました。 iOSのchromeでも同じ現象が起こるらしいのですが、未確認。 …
「safariでowl carouselのスライド時にフォントが細くなる現象の解決策」をはてなブックマークに追加
© graffiti on the web . All rights reserved. WordPress Theme by comfy