jquery - 脉动 Div 直到点击

Question

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

我必须使用 jquery-1.6.2.min.js 因为我正在使用使用它的老虎机插件。我知道这个版本的 jQuery 可能不支持脉动，因此我愿意使用 CSS 来实现相同的效果。非常感谢任何建议。谢谢:)

当前的 jsFiddle:http://jsfiddle.net/S5PB7/

HTML:

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

CSS:

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

    cursor: pointer;

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

JQUERY:

$(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();

Answer 1

这是一个更新的 jsdiffle - http://jsfiddle.net/S5PB7/4/ - 使用 css 脉动，然后在点击时将其删除

js

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

CSS

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

  cursor: pointer;

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

.pulse {
  -webkit-animation-name: pulsate;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite
}

@-webkit-keyframes pulsate {
0% { opacity: 0.0}
 10% { opacity: .20}
 20% { opacity: .40 }
 30% { opacity: .60 }
 40% { opacity: .80 } 
 50% { opacity: 1.0}
 60% { opacity: .80}
 70% { opacity: .60}
 80% { opacity: .40}
 90% { opacity: .20}
 100% { opacity: 0.0}
}