本日は、前回に引き続き、jQuery入門の続き(第11回から)を学習した。

要素の追加など、前回習ったような内容の別のアプローチの掛け方や、クリックやマウス時に発生させることが出来るイベントの実装、描画されているものに対するエフェクトの掛け方を学習した。

今まで学習した、JavaScriptの記述や、cssなどの使い方が自分の頭の中で混ざってしまい、混乱してしまうこおとがあった。少しずつ整理してしっかり自分のものにしたい。

マウスイベントとエフェクトを活用したものを作成した。

赤、緑、青の四角形が縦に1つずつ並んでおり、赤、緑をクリックすると、｢偽物です。｣というテキストダイアログを表示し、図形が消える。
青をクリックすると、｢本物です。｣と表示され拡大されるといったものである。

以下にコードを記述する。
$(function(){

		$('#box1').click(function(){
			alert("偽物です。");
			});
		$('#box1')
			.click(function(){
				$(this).fadeOut(1000);
			});
		$('#box2').click(function(){
			alert("偽物です。");
			});
		$('#box2')
			.click(function(){
				$(this).fadeOut(1000);
			})
		$('#box3').click(function(){
			alert("本物です。");
			});
		$('#box3')
			.click(function(){
				$(this).animate({

				width: "70%",
				opacity: 0.4,
				marginLeft: "0.6in",
				fontSize: "3em", 
				borderWidth: "10px"
			}, 1500);
			});
			
	});