JavaScript - Custom Functions for Custom Effects: What Have You Donefor Me Lately?(position, relative)

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 7(Custom Functions for Custom Effects: What Have You Done for Me Lately?)、POOL PUZZLE(No. 3900))を解いてみる。

その他参考書籍

• Head First HTML and CSS
• Head First JavaScript Programming

POOL PUZZLE(No. 3900))

JavaScript(BBEdit, Emacs)

$(document).ready(function(){
    var clix = [0, 0, 0, 0],
        int1,
        int2,
        int3,
        w = 367,
        m = 10,
        moveMe = function (i, obj) {
            if (clix[i] < 9) {
                $(obj).animate({left: '-=367px'}, 500);
                clix[i] += 1;
            } else {
                clix[i] = 0;
                $(obj).animate({left:'0px'}, 500);
            }
        },
        goLighting = function () {
            int1 = setInterval( function () {
                lightning_one();
            }, 4000);
            int2 = setInterval( function () {
                lightning_two();
            }, 5000);
            int3 = setInterval( function () {
                lightning_three();
            }, 7000);
        },
        stopLightning = function () {
            window.clearInterval(int1);
            window.clearInterval(int2);
            window.clearInterval(int3);
        },
        lightning_one = function () {
            $('#container #lightning1').fadeIn(250).fadeOut(250);            
        },
        lightning_two = function () {
            $('#container #lightning2').fadeIn(250).fadeOut(250);
        },
        lightning_three = function () {
            $('#container #lightning3').fadeIn(250).fadeOut(250);
        },
        getRandom = function (num) {
            var my_random_num = Math.floor(Math.random() * num);
            return my_random_num;
        },
        randomize = function () {
            $('.face').each(function(index) {
                var target_position = getRandom(m),
                    current_position = clix[index],
                    move_to;
                
                clix[index] = target_position;
                if (target_position > current_position) {
                    move_to = (target_position - current_position) * w;
                    $(this).animate({left:'-=' + move_to + 'px'}, 500);
                } else if (target_position < current_position) {
                    move_to = (current_position - target_position) *w
                    $(this).animate({left:'+=' + move_to + 'px'}, 500);
                }
            });
        };

    $('#btnRandom').click(randomize);
    $('#btnReset').click();
 goLighting();
    window.onblur = stopLightning;
    window.onfocus = goLighting;    
 $("#head").click(function(){
        moveMe(0, this);
 });
 $("#eyes").click(function(){
        moveMe(1, this);
 });
 $("#nose").click(function(){
        moveMe(2, this);
 });
 $("#mouth").click(function(){
        moveMe(3, this);
 });
});

index3900.html