通過改變背景顏色閃爍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>

這可能是你的工作需要