Blinzeln html durch die Hintergrundfarbe ändern

Question

ursprünglich I wie unten für eine feste Anzahl von Malen bin mit blinkenden jquery verblassen und Ausblenden zu tun:

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

Jetzt möchte ich es jquery mit Änderungen zu Ändern Sie die Hintergrundfarbe, um einen Blink-Effekt zu erzielen. Aber meine Codierung scheint nicht zu funktionieren:

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

Es blinkt nur einmal. Irgendwas Falsches?

Ich versuche, die unten aber auch nicht funktioniert:

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

Irgendwelche Ideen Jungs?

Answer 1

Sie rufen blink rekursiv auf, aber es gibt keinen Rückruf für das Ende des Zeitlimits, also fügt es alle Timeout-Ereignisse zur gleichen Zeit statt nacheinander hinzu (na ja, nicht genau zur gleichen Zeit, aber Sie bekommen die Idee)).

Sie können es auf diese Weise versuchen:

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

ich die Klassen schwarz und rot gesetzt würde die Hintergrundfarbe zu verwenden.

UPDATE

Ihr zweites Beispiel schlägt fehl, weil jQuery keine Callback-Funktion als Argument für die CSS-Methode akzeptieren. Also folgendes tun wird nichts an der Konsole anmelden:

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

Answer 2

Für Hintergrundfarbe Animation Sie wahrscheinlich jquery-ui-Bibliothek oder Sie können CSS-Animation verwenden, um dies zu tun müsste:

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>

dies kann für Ihren Bedarf arbeiten