Question

最初我正在使用jquery淡入和淡出以固定次数闪烁，如下所示：

function blink(selector, counter) {
    $(selector).fadeOut(500, function() {
        $(this).fadeIn(500, function() {
            if (counter++ < 10) {
                blink(this, counter);
            }
        });
    });
}

现在我想将其更改为使用jquery更改背景颜色以执行闪烁效果。但我的编码似乎不起作用：

function blink(selector, counter) {
    setTimeout(function() {
        $(selector).css("background-color", "red");
    }, 500);
    setTimeout(function() {
        $(selector).css("background-color", "black");
    }, 500);
    if (counter++ < 10) {
        blink(this, counter);
    }
}

它只是闪烁一次。什么事都错了？

我尝试以下但不起作用：

function blink(selector, counter) {
    setTimeout(function() {
        $(selector).css("background-color", "red", function() {
            setTimeout(function() {
                $(this).css("background-color", "black", function() {
                    if (counter++ < 10) {
                        blink(this, counter);
                    }
                });
            }, 1000);
        });
    }, 1000);
}

任何想法的人？

Answer 1

你正在以递归的方式调用blink，但是当超时结束时没有回调，因此它会同时添加所有超时事件而不是一个接着一个（不完全相同的时间，但你得到了想法）

你可以这样试试：

function blink(selector, counter) {
    setTimeout(function() {
        if( $(selector).hasClass('black') ) {
            $(selector).removeClass('black').addClass('red');
        } else {
            $(selector).removeClass('red').addClass('black');
        }

        if( counter++ < 10 ) { // to get the result you want this number may need to be 20 for 10 blinks
            blink(selector, counter);
        }
    }, 500);
}

我会将类设置为黑色和红色以使用背景颜色。

<强>更新

您的第二个示例失败，因为jQuery不接受回调函数作为css方法的参数。因此，执行以下操作不会将任何内容记录到控制台：

$('.my-element').css('background', 'red', function() {
     console.log('this will not log anything because jquery does not call this callback function');
});

Answer 2

对于背景色动画，您可能需要jquery-ui库，或者您可以使用css动画来执行此操作：

function blink(selector) {
  $(selector).addClass('aniBg');
}

blink("div");

.aniBg {
  width: 200px;
  height: 200px;
  background-color: red;
  border: solid 1px black;
  animation: animeBG 2s 5;
  -webkit-animation: colorchange 2s 5;
}
@keyframes animeBG {
  0% { background: red; }
  100% { background: black; }
}

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

Fiddle.

Answer 3

$(document).ready(function() {

  function blink(selector, counter) {
    var t = counter * 1000;

    setTimeout(function() {
      $(selector).css("background-color", "red");
    }, t);

    setTimeout(function() {
      $(selector).css("background-color", "black");
    }, t + 500);

    if (counter++ < 10) {
      blink(selector, counter);
    }
  }

  blink($('div'), 1);
});

div {
  width: 50px;
  height: 50px;
  border: 1px solid;
}

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

这可能适合您的需要

通过更改背景颜色来闪烁html

3 个答案: