Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

@Rikitake

JavaScriptの勉強3日目:2014年2月12日(水)

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

    });
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
0
Help us understand the problem. What are the problem?