用jquery突出显示循环边框
我无法想出一个循环，在x秒内将图像的边框颜色从黑色变为黄色，黄色变为黑色。 然后在单击图像时对循环应用中断。 我不知道从哪里开始，有人能指出我正确的方向吗？ 我想我可能正在使用错误的工具来正确地写这个。
这是我到目前为止所提出的，但如果有更好的方式来写这个，请分享！
for( i = 100; i >= 0; i--) { $("#imgid").css("border-color", 'rgb(' + i + '%,' + i + '%,0)'); } 我想知道三个部分。
1.）我无法想象如何组合两个循环，这样我也可以向上计数，这样它就会变成黄色并且不停地变回黑色。 或者我可以用一个循环完成这个吗？
2.）减慢循环以控制边界衰落效果的秒数。
2.）如何使用onclick（）事件打破循环。
一个好的起点是使用模块模式。 这是一个工作的基础，它将做第一个动画：
我会尝试添加点击中断，因为这可能是范围很棘手。
[编辑]
在这里：点击工作和一切
[/编辑]
码：
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();
我想你想要这样的东西： http ： //benalman.com/projects/jquery-dotimeout-plugin/
在您的代码中，您将使用$.doTimeout设置一个计时器。 使用变量来跟踪边框的当前状态。
在这里玩它： http ： //jsfiddle.net/JZ62H/4/它现在有效。
顶部的所有javascript都来自第一个链接。
要更改速率，您只需更改此代码行中的2 （它出现两次）：
$.doTimeout('timerid', 2, doIt);
我也添加了一个简历function。
看看这个例子：
for (i=0;i<=10;i++) { if (i==3) { break; } document.write("The number is " + i); document.write("
"); }
而不是i == 3你可以寻找你的活动……等等：
http://www.w3schools.com/jsref/event_onclick.asp
另请参阅JS中的Creating Delays
不要自己处理动画，如果你已经在使用jQuery，那么构建基本块已经存在：
- jQuery有
.animate()，其中： - 可以给CSS动画，
- 可以给予动画的速度
- 可以给出一个回调函数，该函数将在动画完成时调用
- 但是，不处理开箱即用的颜色，你需要彩色动画插件 （非常轻量级，由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; });