CODEWITHSUNDEEP
javascriptjqueryhtml
smocer
smocer

Reputation: 157

JS: toggle element's blinking

Lets say I have some element with id="circle" and some button with id="button". All I need to do is:

  1. Circle is blinking by default;
  2. When user presses the button, circle stops blinking;
  3. When user presses the button once more, circle starts blinking;
  4. And so on.

I am trying to do this with the following code:

var blinking = true;

function flash(elementId) {
  var bl = document.getElementById(elementId);
  bl.style.visibility = bl.style.visibility == "hidden" ? "visible" : "hidden";
}

function buttonClick() {
  if (blinking) {
    clearInterval(flash('circle'));
  } else {
    setInterval(flash('circle'), 200);
  }
}		
setInterval(flash('circle'), 200);
<!DOCTYPE html>
<html>
	<body>
    <strong id="circle">&#x25cf</strong>
    <br>
    <button type="button" id="leftButton" onclick="buttonClick()">toggle</button>
  </body>
</html>

but it doesnt work in desirable way. If the solution's code in pure JS will be too large, you can write it with jquery, it doesnt really matter.

Upvotes: 1

Views: 2761

Answers (4)

Volt
Volt

Reputation: 99

Since toggle is not used for two functions anymore, you need to set a variable (either class or hidden tag) for switching. This example shows hidden input instead of a variable (since Boolean variable would not be flexible for multiple buttons, and using opacity blink as a cool option which I found somewhere else here on Stack.

<div id="circle">
    text
</div>
<div id="button">
    <input type="hidden" value=0 />
    button
</div>
<script>
    var circle = setInterval(function(){blink()}, 1000);
    function blink() {
        $("#circle").fadeTo(100, 0.1).fadeTo(200, 1.0);
    }
    $("#button").click(function() {
        var a = $(this).find("input[type='hidden']").val() == 0 ? 1 : 0;
        if ( a == 1 ) {
            clearInterval(circle);
        }else {
            circle = setInterval(function(){blink()}, 1000);
        }
        $(this).find("input[type='hidden']").val(a);
    });
</script>

Upvotes: 0

Stanley Amos
Stanley Amos

Reputation: 232

This code is used with both jquery and css:

the css:

@keyframes blink {
0%{opacity: 0.0;}
50%{opacity: 1.0;}
100%{opacity: 0.0;}
}
.circle {
display: inline-block;
background: #f00;
width:30px;
height:30px;
border-radius:15px;
margin:auto;
margin-top: 20px;
margin-bottom: 20px;
}
.circle.blinker {
 animation: blink .3s infinite;
}
.jdhf {
 background: blue;
}

And the jquery:

$("*").on("click","#button", function(e){
e.stopPropagation();
//verify if the div is blinking and then stop blinking
var f=$(".blinker").length;
if(f>0){
$("#circle").removeClass("blinker");
}
else {
$("#circle").addClass("blinker");
}
});

The html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div id="circle" class="circle blinker">
</div>
<button id="button" class="jdhf">
Toggle animation
</button>

Try it here: https://jsfiddle.net/amostk/ev5uusra/3/

Upvotes: 0

Pengcheng
Pengcheng

Reputation: 323

var blinkingInter = null, 
   circle = document.querySelector('#circle');
//@param ele element object
function toggleCircle(ele) {
    ele.classList.toggle('hidden');
}
// first parameter of setInterval is function 
blinkingInter = setInterval(function() {toggleCircle(circle)}, 
200);

function buttonClick() {
    if(blinkingInter !== null) {
         clearInterval(blinkingInter);
         // set blinkingInter to null
         blinkingInter = null;
    } else {
        blinkingInter = setInterval(function() {
             toggleCircle(circle)}, 200);
    }
}

Upvotes: 0

Martin Ad&#225;mek
Martin Ad&#225;mek

Reputation: 18389

You are calling the flash method, instead you need to provide a callback to setIterval. Also you should store an interval handler to some variable, and use it when calling clearInterval. Last thing that is missing in your code is toggling the blinking boolean value on each click.

var interval;
function buttonClick() {
  if (blinking) {
    clearInterval(interval);
  } else {
    interval = setInterval(flash.bind(null, 'circle'), 200);
  }
  blinking = !blinking;
}
buttonClick();

Or you could simply use function(){}, like this:

interval = setInterval(function() {
    flash('circle');
}, 200);

Upvotes: 1

Related Questions