Pulsating Div until Click

Question

I'm trying to get this button to pulsate until the user clicks it, then it stops pulsating.

I have to use jquery-1.6.2.min.js as I'm using a slot machine plugin that uses this. I understand that this version of jQuery might not support pulsating, hence I'm open to using CSS to achieve the same effect. Any advice is deeply appreciated. Thanks:)

current 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

here is an updated jsdiffle - http://jsfiddle.net/S5PB7/4/ - pulsate with css and then remove it on click

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 2

Why not use a css animation to make the button pulsate. Something like this (unprefixed):

@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;
}

All your jQuery needs to do then, is remove the .pulse class on click. Like so:

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

And the updated fiddle: http://jsfiddle.net/S5PB7/2/

Answer 3

Try this:

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

Here is a clean jQuery solution.

The pulsate-Function starts again after the declared time, so it is pulsing until you click the button. Than the animation is stopping..

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