javascript - 在 Javascript/JQuery 中“脉动”边框

Question

我正在对 Web 表单应用验证 - 我想做的一件事是向包含错误输入的 div 添加一个脉冲边框。

此解决方案:border highlighting loop with jquery和 http://jsfiddle.net/Ue4wy/4/非常准确。

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

使用下面的代码可以将颜色重置为黑色(尽管我确信有更优雅的解决方案)，但我该如何重置循环？

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

任何想法表示赞赏!

Answer 1

我已经更新了 update() 函数以接受参数 i，然后在点击处理程序中调用它，同时调用 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 Fiddle demo .

---

已编辑以修改点击处理程序以提供动画切换(停止/开始):

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

    }, function() {
        anim.go();
    });
};

JS Fiddle demo .

---

编辑 为稍微更上下文感知的点击处理程序，此版本检查是否存在 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 Fiddle demo .

引用资料:

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