title: jQuery image swapping animation Firefox flickering
body: <p>So I made an image flipbook animation that reacts to mousedrag. It works fine in Safari &amp; IE but not Firefox. As I drag the mouse around, the swapping images would flicker. I'm afraid somehow the <code>img</code> or <code>div</code> is being selected causing the flicker so I turned off any selectable attributes. I even turned of the dragging and just used x-mouse position. It still flickers. Is it a memory issue with rendering or my code? These are fairly large images like 800px x 500px.</p>
  
  <pre><code>(function($){
    $.fn.setframe = function(frame){
  
    return this.each(function(){
          var $image = $(this);
          function imageName(frame){
              return 'images/inx'+frame+'.png';
          }
  
         $image.attr('src', imageName(frame));
  
      });
  };
  })(jQuery);
  
  
  $(document).ready(function(){
     var dragDistance = 15;
     var originalX = null;
     var frame = 1;
  
     $('.cot').mousedown(function(e) {
           e.preventDefault();
           originalX = e.pageX - frame * dragDistance;
  
           $(document).mousemove(function(e) {
                 e.preventDefault();
                 frame = Math.floor( ((e.pageX - originalX) / dragDistance) % 35);
                 if(frame &gt; 0) {
                       $('img.inx').setframe(frame);
                 } else {
                       $('img.inx').setframe(Math.abs(frame+ 35));
                 }
  
           });
  
     });
  
     $(this).mouseup(function() {
           $(document).unbind('mousemove');
     });
  
   }
  
  $('img').live('selectstart dragstart', function(evt){ evt.preventDefault(); return false; });
  $('.cot').live('selectstart dragstart', function(evt){ evt.preventDefault(); return false; });
  $('img').disableSelection();
  $('.cot').disableSelection();
  
  
  });
  </code></pre>