title: Javascript Image animation flashing image bug
body: <p>I have some javascript for animating a weather radar, but the images flash on each interval. Does anyone know how to fix this? Here's the code I have so far.an.. <a href="http://jsfiddle.net/5a2BZ/46/" rel="nofollow">http://jsfiddle.net/5a2BZ/46/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;script src="http://code.jquery.com/jquery-1.5.2rc1.js"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"&gt;&lt;/script&gt;
  
  
  &lt;div id="slider"&gt;
      &lt;div id="bar"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>$('#bar').draggable({
      containment: 'parent'
  });
  
  var animate = null;
  var even = true;
  
  animate = setInterval(function () {
  
      if (even) {
          $("#bar").css("background-image", "url('http://static.baynews9.com/images/wx/bn9/radar/7_county/1342653720.jpg')");
          even = false;
      } else { 
          $("#bar").css("background-image", "url('http://static.baynews9.com/images/wx/bn9/radar/7_county/1342654440.jpg')");
          even = true;
      }
  
  }, 500);
  
  
  
  var el = document.getElementById('bar'); 
  el.addEventListener("touchstart", touchHandler, true);
  el.addEventListener("touchmove", touchHandler, true);
  el.addEventListener("touchend", touchHandler, true);
  el.addEventListener("touchcancel", touchHandler, true);
  
  function touchHandler(event){
      var touches = event.changedTouches,
          first = touches[0],
          type = "";
  
      switch(event.type)
      {
          case "touchstart": type = "mousedown"; break;
          case "touchmove":  type="mousemove"; break;        
          case "touchend":   type="mouseup"; break;
          default: return;
      }
      var simulatedEvent = document.createEvent("MouseEvent");
      simulatedEvent.initMouseEvent(type, true, true, window, 1,
                                first.screenX, first.screenY,
                                first.clientX, first.clientY, false,
                                false, false, false, 0/*left*/, null);
  
      first.target.dispatchEvent(simulatedEvent);
      event.preventDefault();
  }
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#slider {
      width: 700px;
      border: 1px solid #000;
      height: 500px;
  }
  
  #bar {
      border: 1px solid #000;
      left:30px;
      top:30px;
      height: 355px;
      cursor: pointer;
      width: 666px;
  }
  </code></pre>