Question

我正在尝试使用Jquery和CSS编写“ Simon Says”游戏程序，但遇到了问题。我似乎无法多次使一个元素“闪烁”。

我已将问题隔离到一个简单的模型（下面的代码）中，该模型以递归方式调用flash函数，类似于此工作版本中的https://codepen.io/nuo/pen/DaEkq

我尝试了各种方法，包括CSS和Jquery动画。问题的症结似乎是第二个CSS更改覆盖了第一个CSS更改，因此只有一个发生。

请问我在这里想念什么？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flash</title>
    <style>
    #wrapper{
        background-color: red;
        opacity: 0.6;
        width: 400px;
        height: 400px;
        margin: auto;
    }
</style>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</head>
<body>

    <div id="wrapper"></div>

    <script>
        function flash(n){
            console.log(n);
            if(n > 0){
                $('#wrapper').css('opacity', '1')
                setTimeout(function(){
                    $('#wrapper').css('opacity', '0.6')
                }, 1000);
                flash(n-1);
            }
        }

        flash(4);

    </script>
</body>
</html>

Answer 1

将不透明度更改为0.6后，您将需要递归。因此，您可以使用animate()，然后将递归调用放在其回调中。

function flash(n) {
  console.log(n);
  
  if (n > 0) {
    $('#wrapper').css('opacity', '1');
    
    $('#wrapper').animate({'opacity': '0.6'}, 1000, function() {
      flash(n - 1);
    });
  }
}

flash(4);

#wrapper {
  background-color: red;
  opacity: 0.6;
  width: 400px;
  height: 400px;
  margin: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper"></div>

Answer 2

在超时内将不透明度设置为0.6后，需要运行flash(n-1)。照原样，该方法将非常快速地循环创建所有超时，然后所有超时将按外观同时运行。

您还需要为第二次不透明度更改添加延迟，以使它在从0.6变回1之前有一个暂停。

function flash(n) {
  console.log(n);
  if (n > 0) {
    $('#wrapper').css('opacity', '1')
    setTimeout(function() {
      $('#wrapper').css('opacity', '0.6');
      
      setTimeout(function(){
        flash(n - 1);
      }, 500);
    }, 500);
  }
}

flash(4);

#wrapper {
  background-color: red;
  opacity: 0.6;
  width: 400px;
  height: 400px;
  margin: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper"></div>

Answer 3

您需要使flash函数更加动态，以使flash函数必须采用一个附加参数ele（要闪烁的元素）。通过这种方式，您可以刷新任何要设置的元素，前提是默认情况下该元素必须具有较低的不透明度。

使效率最大化的第二件事是创建一个ex类别：flashing，将不透明度设置为1，然后简单地附加该类并删除以模拟闪烁效果。

这是一个不依赖jquery的有效示例：

// select element
var el = document.querySelector("#el");

/*
 * @n {int} : number of flashes
 * @ele {DOMElement} : element to flash
 */
function flash( n, ele ) {

  // add flashing class 
  el.className += "flashing";

  // remove flashing class after some delay
  setTimeout(function() {
    el.classList.remove("flashing");
    n--;

    // flash it again after 500ms 
    if (n > 0) {
      setTimeout(function() {
        flash(n)
      }, 500)
    }
		
		// switch the flag
		else
			return false;
		
  }, 1000);

}

flash( 7, el );

#el {
  width: 100px;
  height: 100px;
  background: green;
  opacity: 0.5;
}

.flashing {
  opacity: 1 !important;
}

<div id="el">

</div>

jQuery使元素重复闪烁

3 个答案: