Question

我正在对网络表单进行验证 - 我想做的事情之一就是在包含错误输入的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()。

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同时更改所有边框上的颜色，但不需要为其设置动画。您可以在对象中添加一个重置方法来处理整个事情：

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

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

'Pulsing'Javascript / JQuery中的边框

3 个答案: