CODEWITHSUNDEEP
javascriptjquery
E.Stavr
E.Stavr

Reputation: 1

Make an element blink and stop it when some other element is clicked

I use a function myBlink to be used for initiating the blinking of an element. I use a parameter n which determines the number of times the element should blink. However, I want to get rid of this parameter and make the element stop blinking as soon as other elements, say d1 or d2 or even the body are clicked. Is it possible to do that? Here is my code:

$(document).ready(function() {
  init();
});

function init() {
  myBlink("#a1",6);
}

function myBlink(th,n) {
  var currColor=$(th).css("color");
  for (var i=0;i<n;i++) {
            $(th).fadeOut(200).fadeIn(200).css({"color":"Red","border": "3px" ,"border-style":"dotted" })
                        };
  $(th).css({"color":"currColor"})
                      }
body {
  margin: 20px;
  font-family: "Georgia", serif;
  line-height: 1.8em;
  color: #333;
}

.wideBox {
  position :relative;
  width : 800px;
  height : 600px;
  background: lightgrey;
  font-family: "Georgia", serif;
  border: 2px solid grey;
}

.square {
  font: 30px Verdana, sans-serif;
  border : 2px solid grey ;
  background-color: yellow;
  
}

#a1  {  position :absolute;
        width: 50px;
        height: 50px;
        top :100px;
        left : 100px;
        font: 30px Verdana, sans-serif;
        border : 2px solid grey ;
        background-color: white;
}

#d1 {
  position :absolute;
  width: 50px;
  height: 50px;
  top :200px;
  left : 100px;
}

#d2 {
  position :absolute;
  width: 50px;
  height: 50px;
  top : 200px;
  left : 250px;
}
<body>
  <div id="general" class="wideBox">
    <div id="d1" class="square">1</div>
    <div id="d2" class="square">2</div>
    <div id="a1">?</div>
  </div>
  

</body>

Upvotes: 0

Views: 323

Answers (1)

abpatil
abpatil

Reputation: 916

I have added blink class to blink the div and by using jquery addClass() and removeClass functions we can add and remove class.
Check following snippet- 

$(document).ready(function() {
  init();
  $('.square').on('click', function(){
    var id = this.id; //you can get which div clicked 
    myStopBlink("#a1"); //call stop blink function
  });
});

function init() {
  myBlink("#a1"); 
}

//start blink
function myBlink(th) {  
  $(th).addClass('blink');
}

//stop blink
function myStopBlink(th)
{
  $(th).removeClass('blink');
}
body {
  margin: 20px;
  font-family: "Georgia", serif;
  line-height: 1.8em;
  color: #333;
}
/*blink css starts here*/
.blink {
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
  color:Red;
  border: 3px !important;
  border-color:red !important;
  border-style:dotted !important;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
/*blink css ends here*/

.wideBox {
  position :relative;
  width : 800px;
  height : 600px;
  background: lightgrey;
  font-family: "Georgia", serif;
  border: 2px solid grey;
}

.square {
  font: 30px Verdana, sans-serif;
  border : 2px solid grey ;
  background-color: yellow;
  
}

#a1  {  position :absolute;
        width: 50px;
        height: 50px;
        top :100px;
        left : 100px;
        font: 30px Verdana, sans-serif;
        border : 2px solid grey ;
        background-color: white;
}

#d1 {
  position :absolute;
  width: 50px;
  height: 50px;
  top :200px;
  left : 100px;
}

#d2 {
  position :absolute;
  width: 50px;
  height: 50px;
  top : 200px;
  left : 250px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
  <div id="general" class="wideBox">
    <div id="d1" class="square">1</div>
    <div id="d2" class="square">2</div>
    <div id="a1">?</div>
  </div>
</body>

Upvotes: 1

Related Questions