‘Pulsing’Javascript / JQuery中的边框

我正在对Web表单应用validation – 我想要做的事情之一是向包含错误输入的div添加脉冲边框。

这个解决方案： 边框突出显示循环与jquery和http://jsfiddle.net/Ue4wy/4/几乎达到了标记。

但我希望能够在点击处理程序上将黄色边框淡化为黑色并重置循环（此示例暂停循环），因此下次用户点击提交时它会再次启动。

使用下面的代码将颜色重新设置为黑色（虽然我确信有更优雅的解决方案），但如何重置循环？

$('#weight').animate({ borderBottomColor: '#000', borderLeftColor: '#000', borderRightColor: '#000', borderTopColor : '#000' }, 'fast' ); 

任何想法赞赏！

Answer 1

我已经更新了update()函数来接受一个参数i ，然后在click处理程序中调用它和window.clearTimeout() ：

 var addClickHandler = function() { $("div").click(function() { window.clearTimeout(timer); update(0); }); }; 

这确实需要对update()的其他调用也需要传递i ：

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

JS小提琴演示 。

---

编辑修改click-handler以为动画提供切换（停止/开始）：

 var addClickHandler = function() { $("div").toggle(function() { window.clearTimeout(timer); update(0); }, function() { anim.go(); }); }; 

JS小提琴演示 。

---

编辑了更多上下文感知的点击处理程序，此版本检查是否存在timer变量，如果未找到，则启动动画。 如果找到则清除超时，将timer设置为false并调用update(0)将边框重置为黑色：

 var addClickHandler = function() { $("div").click(function() { console.log(timer); if (!timer){ timer = window.setTimeout(anim.go, 30); } else { window.clearTimeout(timer); timer = false; update(0); } }); 

JS小提琴演示 。

参考文献：

• toggle() 。
• window.clearTimeout() 。

Answer 2

这是一个用于脉动边框的jQuery UI效果：

 $.effects.borderPulsate = function(o) { return this.queue(function() { var elem = $(this), mode = $.effects.setMode(elem, o.options.mode || 'show'), times = (o.options.times || 5), duration = o.duration ? o.duration : $.fx.speeds._default, isVisible = elem.is(':visible'), color = (o.options.color || 'rgb(255,255,0)'), startColor = (o.options.startColor || elem.css('border-color') || 'transparent'); if (!isVisible) { elem.show(); } if ((mode == 'hide' && isVisible) || (mode == 'show' && !isVisible)) { times--; } for (var i = 0; i < times; i++) { elem.animate({ 'border-color': color }, duration, o.options.easing, function() { elem.css( 'border-color', startColor ); }); } elem.animate({ 'border-color': color }, duration, o.options.easing, function() { (o.callback && o.callback.apply(this, arguments)); }); elem .queue('fx', function() { elem.dequeue(); }) .dequeue(); }); }; 

http://jsfiddle.net/cdeutsch/TjkNd/

Answer 3

您可以使用borderColor同时更改所有边框上的颜色，但不需要为其设置动画。 你可以在你的对象中添加一个reset方法来处理整个事情：

 var reset = function() { i = 0; step = 10; up = true; if(timer) window.clearTimeout(timer); timer = null; $('#weight').css('borderColor', '#000'); } 

然后在您的单击处理程序上，在anim.reset()之后调用anim.stop() 。