'脉冲'Javascript/JQuery中的一个边界

'Pulsing' a border in Javascript/JQuery

本文关键字：一个 边界 脉冲 Javascript JQuery      更新时间：2023-09-26

我正在对web表单进行验证，我想做的一件事是为包含错误输入的div添加一个脉冲边界。

此解决方案：使用jquery和http://jsfiddle.net/Ue4wy/4/几乎切中要害。

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

使用下面的代码将颜色重置为黑色是可行的（尽管我相信有一个更优雅的解决方案），但我该如何重置循环？

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

任何想法都值得赞赏！

我已经更新了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演示。

编辑以修改点击处理程序，为动画提供切换（停止/启动）：

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

JS Fiddle演示。

编辑为了获得更具上下文意识的单击处理程序，此版本将检查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演示。

参考文献：

  • CCD_ 10
  • CCD_ 11

这里有一个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/

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

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

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

相关文章：