Question

我使用函数myBlink来启动元素的闪烁。我使用参数n来确定元素应该闪烁的次数。但是，我想摆脱这个参数，并且只要点击其他元素，比如d1或d2甚至是身体，就会使元素停止闪烁。有可能吗？这是我的代码：

＆＃13;

$(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"})
                      }

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

我添加了 blink 类以使div闪烁，并使用jquery addClass()和removeClass函数添加和删除类。
请查看以下摘录 -

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

使元素闪烁并在单击其他元素时停止它

1 个答案: