Mistergreen Mistergreen - 5 months ago 21
jQuery Question

jQuery image swapping animation Firefox flickering

So I made an image flipbook animation that reacts to mousedrag. It works fine in Safari & IE but not Firefox. As I drag the mouse around, the swapping images would flicker. I'm afraid somehow the

img
or
div
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.

(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 > 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();


});

Answer

I redid the way it is animating. Don't use image swapping for large image or you'll see image flickering on certain browsers. Instead I hide() and show() layers to animate.