Question

我已经成功地将其用于工作，但我在网站上有许多我想要脉冲的按钮，目前我正在使用id进行此操作，但我想转向更灵活的东西并使用类来选择哪个按钮应该是脉冲。这是JSFiddle

我看到的问题，至少在我的浏览器（MAC上的Chrome Chrome 25.0）中按钮按预期脉冲输出，但脉冲输出很慢，然后下一个脉冲需要几秒钟才能触发，然后，下一次改变需要更长的时间，似乎陷入了困境。以下是动画脚本：

function pulseIn() {
    $(".pulse").animate({
        backgroundColor: "rgba(144,238,144,0.5)"
    }, 1000, 'swing', function () {
        pulseOut();
    });
}

function pulseOut() {
    $(".pulse").animate({
        backgroundColor: "rgba(0,0,0,0.5)"
    }, 1000, 'swing', function () {
        pulseIn();
    });
}

pulseIn();

Answer 1

我updated your code为你服务。这应该通过特定的控制来脉冲输入和脉冲输出。在您的代码中，一旦第一个控件完成脉冲输入后，您执行了pulseOut选择了所有.pulse，包括第二个，即使它还没有完成运行pulseIn（有点）令人困惑的解释，但希望你得到的要点）。

$('.pulse').each(function(){
    pulseIn($(this));
});

function pulseIn(control) {
    control.animate({
        backgroundColor: "rgba(144,238,144,0.5)"
    }, 1000, 'swing', function () {
        pulseOut(control);
    });
}

function pulseOut(control) {
    control.animate({
        backgroundColor: "rgba(0,0,0,0.5)"
    }, 1000, 'swing', function () {
        pulseIn(control);
    });
}

Answer 2

我写了一个小片段，可以在不使用jQuery UI的情况下使用 - 只有jQuery。

function fadeBtn(el, fadeOutSpeed, fadeInSpeed){
    el.fadeOut(fadeOutSpeed, function(){
        jQuery(this).fadeIn(fadeInSpeed, function(){
            fadeBtn(el, fadeOutSpeed, fadeInSpeed);
        });
    });
}

fadeBtn(jQuery('.pulseBtn'), 750, 2500);

jsFiddle：http://jsfiddle.net/f5q6kuse/

脉冲按钮HTML，jQuery，jQueryUI

2 个答案: