Text colour highlighting using JavaScript
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>//&lt;![CDATA[
var blinkText = $(".highlight");

var interval = setInterval(function() {
  blinkText.toggleClass("highlightRed");
}, 500);
//]]&gt;</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.highlight {
  -webkit-transition: background 1.0s ease-in-out;
  -ms-transition: background 1.0s ease-in-out;
  transition: background 1.0s ease-in-out;
}
.highlightRed {
  color: red !important;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;span class="highlight" style="font-weight: bolder; font-size: 33px; color: #00F"&gt;&amp;rarr;&lt;/span&gt;</code></pre>
</div>
</div>
</p>

<p><a href="https://jsfiddle.net/o1owo30u/" rel="nofollow"><strong>JSFiddle:</strong></a></p>

<p>The above code is expected to make the given arrow blink according to the interval given but it does not. How to make the arrow change colour with respect to the interval given?</p>