通过改变背景颜色闪烁HTML

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

我将设置类黑色和红色利用的背景色。

UPDATE

你的第二个例子因为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>

这可能是你的工作需要