【jQuery】マウスオーバー時の画像エフェクト

シュウ

こんばんはー今日は【jQuery】マウスオーバー時の画像エフェクトについて
勉強していきましょう！

[記事の内容]

マウスオーバー（フェードイン/アウト）

1: index.htmlファイルを作成しよう

HTMLのhead要素内に、「style.css」、「JavaScript」ファイルを読み込んでおきます。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="format-detection" content="telephone=no">
<title>【jQuery】マウスオーバー時の画像エフェクト</title>
<!--CSS-->
<link href="css/style.css" rel="stylesheet" type="text/css">
<!--JS-->
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>


</body>
</html>

2: 画像の用意し配置します

画像サイズ「360×300」を用意します。
今回はdivタグでimgタグを囲いマウスオーバーした際に、カーソルを矢印から指マークに変えるために「cursor:pointer」の設定をおこないます。

画像サイズ「360×300」

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="format-detection" content="telephone=no">
<title>【jQuery】マウスオーバー時の画像エフェクト</title>
<!--CSS-->
<link href="css/style.css" rel="stylesheet" type="text/css">
<!--JS-->
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>

<div class="thumbnail">
   <img src="images/img.jpg" alt="画像"/> 
</div>

</body>
</html>

.thumbnail {
	width: 360px;
	height: 300px;
	cursor: pointer;
}

3: index.htmlにjQueryを記述します

基本となるマウスオーバーとマウスアウトをhover()イベントを使って設定します。

<script type="text/javascript">
$(function () {
  $(".thumbnail").hover(function () {
	  //マウスオーバーしたときの処理
  },function () {
	  //マウスアウトしたときの処理
  });
});
</script>

4: スクリプトを追加し、画像にエフェクトを設定します

マウスオーバー時に画像が半透明になり、マウスアウト時に元に戻る設定をおこないます。
1「animate()」で画像を半透明(opacityプロパティを0.5)にアニメーションをさせます。

第2引数の”fast”はアニメーションのスピードを指定します。
animate()の前のstep()は、マウスオーバー/アウトを素早く繰り返したときに、マウスオーバーした時点で別の
アニメーションが進行中だった場合、
そのアニメーションを中断し、stop()の後のanimate()を実行します。

2animate()で画像を元の状態に戻します。(opacityプロパティを1)に設定します。

<script type="text/javascript">
$(function () {
  $(".thumbnail").hover(function () {
	  //マウスオーバーしたときの処理
	  $(this).stop().animate({opacity:0.5},"fast");
  },function () {
	  //マウスアウトしたときの処理
	   $(this).stop().animate({opacity:1},"fast");
  });
});
</script>

See the Pen
OJPGGvN by shu (@shu0325)
on CodePen.

2つの画像を使ったエフェクト

1: 同じサイズの画像を用意します

今回は2つの画像を用意し、先ほど使用したCSSを使います。

画像サイズ「360×300」

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="format-detection" content="telephone=no">
<title>【jQuery】マウスオーバー時の画像エフェクト</title>
<!--CSS-->
<link href="css/style.css" rel="stylesheet" type="text/css">
<!--JS-->
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>

<div class="thumbnail">
   <img src="images/img.jpg" alt="画像"/> 
</div>

</body>
</html>

.thumbnail {
	width: 360px;
	height: 300px;
	cursor: pointer;
	background: url("images/hover_img") no-repeat;
}

2: スクリプトを変更します。

スクリプトを変更し、画像にマウスオーバーしたときに、「opacity:0」にし、
マウスアウトしたときに「opacity:1」にアニメーションをさせます。

変更点:背景画像はフェードイン/アウトさせたくないので、
ターゲットが前面画像のimg要素になるよう、「$(“img” , this)」に変更します。

See the Pen
dyPERqd by shu (@shu0325)
on CodePen.

画像を使いスライドさせるエフェクト

1: 使用する画像を用意します

今回は、1つの画像をスライドさせるエフェクトさせる方法です。

画像サイズ「720×300」

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="format-detection" content="telephone=no">
<title>【jQuery】マウスオーバー時の画像エフェクト</title>
<!--CSS-->
<link href="css/style.css" rel="stylesheet" type="text/css">
<!--JS-->
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>

<div class="thumbnail">
   <img src="images/img.jpg" alt="画像"/> 
</div>

</body>
</html>

.thumbnail {
	width: 360px;
	height: 300px;
	cursor: pointer;
	overflow: hidden;
}

「overflow: hidden;」を使用しボックスに収まらない部分を非表示にしましょう。

2: スクリプトを変更します。

マウスオーバーしたときに、animate()でmargin-left: -300px;に設定します。
スタート地が-300px、マウスオーバーした際に0に戻る設定です。

	<script type="text/javascript">
		$(function () {
			$(".thumbnail").hover(function () {
				$("img", this).stop().animate({marginLeft:"-360px"},"fast");
			},function () {
				$("img", this).stop().animate({marginLeft:"0px"},"fast");
			});
		});
	</script>

See the Pen
YzPbxxg by shu (@shu0325)
on CodePen.