Question

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

我必须使用 jquery-1.6.2.min.js ，因为我正在使用一个使用它的老虎机插件。我知道这个版本的jQuery可能不支持脉动，因此我愿意使用CSS来达到同样的效果。任何建议都深表感谢。感谢：）

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

为什么不使用css动画来使按钮脉动。这样的东西（没有前缀）：

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}
.pulse {
    animation-iteration-count: infinite;
    animation-name: pulse;
    animation-duration: 1s;
    animation-fill-mode: both;
}

然后你需要做的所有jQuery，就是在点击时移除.pulse类。像这样：

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

更新的小提琴： http://jsfiddle.net/S5PB7/2/

Answer 2

这是一个更新的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}
}

Answer 3

试试这个：

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

Answer 4

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

脉动功能在声明的时间后再次启动，因此它会发出脉冲直到您单击按钮。比动画停止..

http://jsfiddle.net/S5PB7/5/

// 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();
    });
});

脉动Div直到点击

4 个答案: