Question

I’m having trouble coming up with a loop that changes the border color of an image from black to yellow and yellow to black over x seconds. Then applying an interrupt to the loop when the image gets clicked on. I don’t know where to start, can someone point me in the right direction? I think I may be using the wrong tools to properly write this.

Here’s what I’ve come up so far, though if there’s a better way to write this, do share!

for( i = 100; i >= 0; i--)
{
$("#imgid").css("border-color", 'rgb(' + i + '%,' + i + '%,0)');
}

There’s three parts I’d like to know.

1.)I’m having trouble picturing how I could combine two loops so that I can also count upwards as well so that it will turn into yellow and back to black without stopping. Or can I accomplish this with one loop?

2.)Slow the loop to be able to control the amount of seconds for the border fading effect.

2.)How to break the loop with an onclick() event.

Answer 1

A good place to start would be using the module pattern. Here is a base to work from, it will do the first animation:

http://jsfiddle.net/Ue4wy/1/

I’ll try add the click interrupt, as that can be tricky with scope.

[Edit]

Here you go: click working and everything

http://jsfiddle.net/Ue4wy/4/

[/Edit]

Code:

var anim = (function() {
    var i = 0;
    var step = 10;
    var up = true;
    var timer = null;

    var next = function() {
        if (up) {
            i += step;
        }
        else {
            i -= step;
        }
        if(i<0){i=0; up=true;}
        if(i>255){i=255; up=false;}
        update();
    };

    var update = function() {
        $("div").css("border-color", 'rgb(' + i + ',' + i + ',' + 0 + ')');
    };

    var go = function() {
        next();
        timer = window.setTimeout(anim.go, 30);
    };

    var stop = function() {
        if (timer) {
            window.clearTimeout(timer);
            timer = null;
        }
    };

    var addClickHandler = function() {
        $("div").click(function() {
            if(timer){
                anim.stop();
            }
            else{
                anim.go();
            }
        });
    };

    return {
        go: go,
        stop: stop,
        addClickHandler: addClickHandler 
    };
}());

anim.addClickHandler();
anim.go();