【jQuery】透明度を変えて、モヤ～ッと切り替わるマウスオーバーエフェクト

jQueryの基本を、画像に簡単なエフェクトを加えながら勉強してみたいと思います。

jQueryを使えばJavascriptは怖くない

世の中には沢山のJavascriptライブラリが存在します。
何かやりたいことがあれば、検索してソースをコピペすると大概のものは事足ります。

が、少しでもスクリプトが理解できると、自分で出来ることの幅が一気に広がります。
あーこのプラグインだいたい望みどおりなんだけど惜しいなー、という時も、自分でちょちょいとカスタマイズすることで解決できるかもしれません。

javascriptはスクリプトの見た目から難解に感じますが、jQueryを使うことにより、便利な機能を、とても簡単に、自分の好みに応じて実現することができます。
Javascriptを勉強しようとする上で、jQueryはとてもいい入り口だと思います。

例えばこれ作ってみます

デモページ

マウスオーバーで、ジワッと透明度が変わるアニメーション効果です。

まずはjQueryを使う準備

jQueryとはJavascriptを便利に使うためのライブラリです。
ライブラリとは便利な機能を一つのファイルにまとめたものです。

最初にHTML上でjQueryを呼び出す必要があります。
本家jQueryでダウンロードしてアップロードしても良いのですが、Google AJAX Libraries APIという便利なものがあります。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>

メジャーなライブラリは、ここから読み込んで、みんなで使っちゃおうぜ、というものです。

HTMLから書いてみる

<img src="img/photo.jpg" width="480" height="640" alt="" class="photo">

ただの画像です。classをphotoと名づけました。

いよいよJavascriptを書く

<script type="text/javascript">
$(function(){
	$("img.photo").hover(function(){
		$(this).stop().animate({"opacity":"0.7"});
	},function(){
		$(this).stop().animate({"opacity":"1"});
	});
});
</script>

慣れてくるまでは、Javascriptのルックスは最悪だと思います。
（）や｛｝が心をかき乱します。

順番にコードをみていきます。

基本的に

$(function(){

と

});

の間に実行させる処理を書きます。そういうものだと自分に言い聞かせます。

$("img.photo")

↑これは巷では「セレクタ」と呼ばれています。CSSみたいなので、理解しやすいと思います。classがphotoのimgのことです。

$("img.photo").hover(function(){

↑セレクタの上にマウスが乗ると、続く処理を実行する。って意味です。

 $(this).stop().animate({"opacity":"0.7"});

jQueryの便利タグが使われています。

$(this)は深く考えると難しくなるので、ここではイベント発生源と考えて良いと思います。つまり$(“img.photo”).hoverマウスカーソルが乗った状態の画像です。

.stop()これはアニメーションを止める処理です。アニメーション中の場合の事を考えて、まずは止めます。

.animate({“opacity”:”0.7″})これがアニメーションさせるタグです。
.animate()は中に書くパラメータの値によっていろんなアニメーション効果が実現できます。
{“opacity”:”0.7″}は不透明度を70%にするということです。

},function(){

その後、一旦処理が閉じられて再び処理が書いてあります。カンマ以降の命令文はマウスカーソルが外れた時の処理です。

$(this).stop().animate({"opacity":"1"});

透過中であればまず止めて、その後、不透明度100%にアニメーションします。

なんとなく理解する

ここまで読むとなんとなくJavascriptのコードが何をしているのかわかると思います。

<script type="text/javascript">
$(function(){
	$("img.photo").hover(function(){
		$(this).stop().animate({"opacity":"0.7"});
	},function(){
		$(this).stop().animate({"opacity":"1"});
	});
});
</script>

このくらい短いスクリプトを、タグの意味を順番に思い出しながらコピペでなく自分で書いてみると、ずいぶんJavascriptが身近になると思います。

古い記事へ新しい記事へ