JQuery.Color обходное решение

Question

Я хочу сделать текстовое поле «flash» с помощью JQuery. Сначала я хотел использовать .animate, но я узнал, что анимация не работает на цветах, если не используется плагин JQuery.Color.

Дело в том, что у меня есть причины, по которым я не хочу использовать какие-либо дополнительные плагины, поэтому мой вопрос в том, есть ли какое-то умное обходное решение (это не смешно сложно).

Вот JSFiddle, который демонстрирует как то, что я хочу, и моя лучшая попытка до сих пор ...

Answer 1

Как уже упоминалось в комментариях, почему бы не создать CSS анимацию, которая делает то, что вы хотите, и прикрепить это к toggleClass?

$(function() { 
 

 

 
    var Box2 = $('.box2'); 
 

 

 
    Box2.click(function() { 
 
    $('#tb2').toggleClass("flash"); 
 

 
    }); 
 

 
});

.box2 { 
 
    width: 170px; 
 
    border-style: solid; 
 
    border-color: black; 
 
    margin: 30px 20px; 
 
    cursor: pointer; 
 
} 
 
@keyframes flash { 
 
    0% { 
 
    background-color: white; 
 
    } 
 
    100% { 
 
    background-color: red; 
 
    } 
 
} 
 
.flash { 
 
    animation-name: flash; 
 
    animation-duration: .1s; 
 
    animation-iteration-count: 5; 
 
}

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

 

 
<div class="box2">Click Me</div> 
 
<input type="text" id="tb2"></input>