title: Javascript background color transition and reset on HTTP response
body: <p>I am making a POST request to a server using ajax from Firefox. The input is just some text entry in a box contained within a <code>div</code>:</p>
  
  <pre><code>&lt;div id="mydiv"&gt;
      ...stuff...
  &lt;/div&gt;
  </code></pre>
  
  <p>If the request is successful, I call a handler to reflect that status. If the request is in error, I call a different handler.</p>
  
  <pre><code>$.ajax({
      type: 'POST',
      data: my_json,
      dataType: "json",
      url: "/my/url",
      success: function(result, status, xhr) {
          success_callback();
      },
      error: function(xhr) {
          error_callback();
      }
  
  });
  </code></pre>
  
  <p>The success callback doesn't do much. In the error callback, I want to change the background color attribute to red to give a visual indication of the error, and then fade back to the original background color (say, white).</p>
  
  <p>Doing an instantaneous color change is easy:</p>
  
  <pre><code>function success_callback() {
  
      var element = document.getElementById('mydiv');
      element.style.backgroundColor = "white";
  
  }
  
  function error_callback() {
  
      var element = document.getElementById('mydiv');
      element.style.backgroundColor = "red";
  
  }
  </code></pre>
  
  <p>I've tried doing the fade using a css animation such as</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.div.error {
       -webkit-animation-duration: 3s;
       -webkit-animation-name: error;
       animation-duration: 3s;
       animation-name: error;
  } 
  @-webkit-keyframes error {
      from {
          background-color: red;
      }
      to {
          background-color: white;
      }
  }
  </code></pre>
  
  <p>and then adding the error class in the JavaScript:</p>
  
  <p><strong>JS</strong></p>
  
  <pre><code>function error_callback() {
  
      if ($('.div').hasClass('error')) {
          $('.div').removeClass('error');
      else {
          $('.div').addClass('error');
      }
  }
  </code></pre>
  
  <p>This works the first time I send a bad POST request, but doesn't on subsequent bad POSTs because I don't think <code>removeClass</code> is working correctly (or rather I'm not using it correctly).</p>
  
  <p>I've also tried using jquery-ui following this post <a href="https://stackoverflow.com/questions/26936811/css-transition-fade-background-color-resetting-after">CSS transition: fade background color, resetting after</a> but that doesn't seem to work for me. Perhaps it something to do with executing an animation in the context of a button click rather than an HTTP response?</p>
  
  <p>Am I heading in the right direction for using this? I'd like to keep within the boundaries of standard jQuery if possible (i.e. stay away from jQuery UI).</p>