Mistergreen Mistergreen - 1 year ago 122
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

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.

$.fn.setframe = function(frame){

return this.each(function(){
var $image = $(this);
function imageName(frame){
return 'images/inx'+frame+'.png';

$image.attr('src', imageName(frame));


var dragDistance = 15;
var originalX = null;
var frame = 1;

$('.cot').mousedown(function(e) {
originalX = e.pageX - frame * dragDistance;

$(document).mousemove(function(e) {
frame = Math.floor( ((e.pageX - originalX) / dragDistance) % 35);
if(frame > 0) {
} else {
$('img.inx').setframe(Math.abs(frame+ 35));



$(this).mouseup(function() {


$('img').live('selectstart dragstart', function(evt){ evt.preventDefault(); return false; });
$('.cot').live('selectstart dragstart', function(evt){ evt.preventDefault(); return false; });


Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download