JQuery.Color 解决方法

Question

我想使用 Jquery 创建一个文本框 "flash"。我首先想使用 .animate，但我了解到除非使用插件 JQuery.Color.

，否则 animate 不能处理颜色

问题是我有不想使用任何其他插件的原因，所以我的问题是是否有一些聪明的解决方法（这并不复杂得离谱）。

这是一个 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>

JQuery.Color 解决方法

JQuery.Color workaround

jquery

css

colors

jquery-animate