本日は、前回に引き続き、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);
});
});