JavaScript - jQuery Effects and Animation: A Little Glide in YourStride(relative element movement)

Head First jQuery
(O'Reilly Media)
Ryan Benedetti(著), Ronan Cranley(著)

開発環境

• OS X Yosemite - Apple (OS)
• Safari, Firefox, Google Chrome(Webプラウザ)
• Emacs (CUI)、BBEdit - Bare Bones Software, Inc.(GUI) (Text Editor)
• JavaScript (プログラミング言語)

Head First jQuery(Ryan Benedetti(著)、Ronan Cranley(著)、O'Reilly Media)のChapter 5(jQuery Effects and Animation: A Little Glide in Your Stride)、EXERCISE(No. 2971)を解いてみる。

その他参考書籍

• Head First HTML and CSS
• Head First JavaScript Programming

EXERCISE(No. 2971)

JavaScript(BBEdit, Emacs)

$(document).ready(function () {
    var headclix = 0,
        eyesclix = 0,
        noseclix = 0,
        mouthclix = 0,
        lightning_one = function () {
            $('#lightning1').fadeIn(250).fadeOut(250);
            setTimeout(lightning_one, 4000);
        },
        lightning_two = function () {
            $('#lightning2').fadeIn(250).fadeOut(250);
            setTimeout(lightning_two, 5000);
        },
        lightning_three = function () {
            $('#lightning3').fadeIn(250).fadeOut(250);
            setTimeout(lightning_three, 7000);
        };
    
    $('#head').click(function () {
        
        if (headclix < 9) {
            headclix += 1;
        } else {
            headclix = 0;
        }
    });
    $('#eyes').click(function () {
        
        if (eyesclix < 9) {
            eyesclix += 1;
        } else {
            eyesclix = 0;
        }
    });
    $('#nose').click(function () {
        
        if (noseclix < 9) {
            noseclix += 1;
        } else {
            noseclix = 0;
        }
    });
    $('#mouth').click(function () {
        
        if (mouthclix < 9) {
            mouthclix += 1;
        } else {
            mouthclix = 0;
        }
    });
    lightning_one();
    lightning_two();
    lightning_three();

    $('#head').animate({left:'-=367px'}, 5000)
        .animate({left:'0px'}, 5000);
});

index2971.html