jquery - 边框突出显示循环与 jquery

Question

我无法想出一个循环，该循环在 x 秒内将图像的边框颜色从黑色更改为黄色，再从黄色更改为黑色。然后在单击图像时对循环应用中断。我不知道从哪里开始，有人可以指出我正确的方向吗？我想我可能使用了错误的工具来正确地编写它。

这是我到目前为止的想法，如果有更好的写法，请分享!

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

我想知道三个部分。

1.)我无法想象如何将两个循环结合起来，这样我也可以向上计数，这样它就会变成黄色然后变回黑色，不会停止。或者我可以用一个循环完成这个吗？

2.) 放慢循环以控制边框淡出效果的秒数。

2.)如何使用 onclick() 事件中断循环。

Answer 1

一个好的起点是使用模块模式。这是一个工作基础，它将执行第一个动画:

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

我会尝试添加点击中断，因为这在范围内可能会很棘手。

[编辑]

给你:点击工作和一切

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

[/编辑]

代码:

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();