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

Answer 2

我想你想要这样的东西： http://benalman.com/projects/jquery-dotimeout-plugin/

在您的代码中，您将设置一个$.doTimeout的计时器。使用变量来跟踪边框的当前状态。

在此处播放：http://jsfiddle.net/JZ62H/4/ 它现在有效。

顶部的所有javascript都来自第一个链接。

要更改费率，您需要做的就是更改此行代码中的2（它出现两次）：

$.doTimeout('timerid', 2, doIt);

我也添加了简历功能。

Answer 3

看看这个例子：

for (i=0;i<=10;i++)
  {
  if (i==3)
    {
    break;
    }
  document.write("The number is " + i);
  document.write("<br />");
  }

而不是i == 3你可以寻找你的活动......等等 http://www.w3schools.com/jsref/event_onclick.asp

另请参阅Creating Delays in JS

Answer 4

不要自己处理动画，如果你已经在使用jQuery，那么构建基本块已经存在：

jQuery有.animate()，其中：
可以给CSS设置动画，
可以给出动画速度
可以给出一个回调函数，当动画完成时将调用该函数
但是，不处理开箱即用的颜色，你需要color animation plugin（非常轻量级，由jQuery的作者编写）

使用这些，这就是我如何构建你想要的东西：

var stop = false; // a flag for the click handler to tell the animation to stop

function highlight() {
   // Animate to yellow, 1000 milliseconds
   $("#imgId").animate({borderColor: "yellow"}, 1000, function () {
      // Exit if the flag is set, remove this line if
      // you want it to always fade to black before stopping.
      if (stop) return;
      // Now animate back to black
      $("#imgId").animate({borderColor: "black"}, 1000, function () {
         // Keep animating if the flag isn't set
         if (!stop) highlight();
      });
   });
}

// Start the loop
highlight();

// Click handler
$("#imgId").click(function () {
   stop = true;
});

用jquery突出显示循环边框

4 个答案: