Jquery 脉动Div直到咔嗒声

我试图让这个按钮跳动，直到用户点击它，然后它停止跳动

我必须使用jquery-1.6.2.min.js，因为我使用的是一个老虎机插件。我知道这个版本的jQuery可能不支持脉动，因此我愿意使用CSS来实现同样的效果。非常感谢您的建议。谢谢：）

当前JSFIDLE：

HTML:

<div id="btn2" class="button">Kitchen Act!</div>

#btn2{
    float: right;
    margin: 0px;
    padding: 10px;
    background-color: blue;
    color:white;

    cursor: pointer;

    border:none;
    border-radius:10px;
    top:20px;
    margin:auto 0;
}

$(document).ready(function keepPulsing() {
    $pulse.effect("pulsate", 500, keepPulsing);
}

var pulsing = true,
$pulse = jQuery("#btn2").click(function(){
    if (pulsing) {
        // jQuery(".other").slideDown();
        jQuery(this).stop(true, true).css("opacity",1);
    } 
    pulsing = !pulsing;        
});

keepPulsing();

JQUERY:

<div id="btn2" class="button">Kitchen Act!</div>

#btn2{
    float: right;
    margin: 0px;
    padding: 10px;
    background-color: blue;
    color:white;

    cursor: pointer;

    border:none;
    border-radius:10px;
    top:20px;
    margin:auto 0;
}

$(document).ready(function keepPulsing() {
    $pulse.effect("pulsate", 500, keepPulsing);
}

var pulsing = true,
$pulse = jQuery("#btn2").click(function(){
    if (pulsing) {
        // jQuery(".other").slideDown();
        jQuery(this).stop(true, true).css("opacity",1);
    } 
    pulsing = !pulsing;        
});

keepPulsing();

试试这个：

function keepPulsing() {
    $pulse.effect("pulsate", 500, keepPulsing);
}

$(document).ready(function(){

    var pulsing = true,
    jQuery("#btn2").click(function(){
       if (pulsing) {
          // jQuery(".other").slideDown();
          jQuery(this).stop(true, true).css("opacity",1);
       } 
     pulsing = !pulsing;        
     keepPulsing();
});

---

为什么不使用css动画使按钮脉动呢。类似于这样（未固定）：

然后，jQuery需要做的就是在单击时删除

.pulse

类。像这样：

$('#btn2').click(function () {
    $(this).removeClass('pulse');
});

和最新的小提琴：

---

这里是一个更新的jsdiffle--使用css脉动，然后单击将其删除

js

css

---

这里是一个干净的jQuery解决方案

脉冲功能在声明的时间后再次启动，因此它一直在脉冲，直到您单击按钮为止。然后动画停止

---

这就是你想要的吗（我刚刚修复了你代码中的几个语法错误）：你的语法完全错了……keepPulsing将不存在there@scrowler是的，这就是我想要实现的。让我看看。“谢谢。”对此我们深表歉意。将确保下次@marvwhere语法不会出现错误，谢谢。我尝试了jquery和css选项，效果很好。谢谢：）此解决方案仅适用于webkit浏览器（safari和chrome）。它没有在firefox和IE中运行！这里有一个适用于所有兄弟（忘记旧ie）的混合解决方案，但只能作为sass使用。如果需要，可以转换它-或者只是将所有行添加到css中-您还应该使用所有不透明度选项（google it）-1按照OP的要求，在旧jQuery版本上使用webkit css-jQuery是为大多数浏览器提供支持而构建的，因此，在这种情况下，这是一个更合适的解决方案。为了公平起见，我不会-1这个，因为它仍然有用。但我还是不同意你的观点。使用pulsetime作为全局变量，稍微干净一点：

// set global variable if pulsate should continue
// set button
var pulsate = true,
    button = jQuery("#btn2");


// init function returns pulsing again and again
function initPulsing() {
    if (pulsate) {
        var pulseTime = 2500;

        // start pulsing for some seconds
        button.effect("pulsate", {times:5}, pulseTime);

        // restart pulsing if time is up
        setTimeout(function(){ 
            initPulsing(); 
        }, pulseTime);        
    }
}

// stops pulsing immediately
function stopPulsing() {
    button.stop(true).css('opacity', 1);
    pulsate = false;
}


$(document).ready(function(){

    // start pulsing
    initPulsing();

    // stop pulsing on click
    button.click(function(){
        stopPulsing();
    });
});