[exec]

Суть скрипта: разбиваем изображение на несколько вертикальных полосок и анимируем их по очереди.

Имеется вот такой код:

(function ( $ ) {
	$.fn.fadeQueue = function ( parts ) {
		parts = parts || 10;
		return this.each(function ( i, g ) {
			var wdt = $(this).width(),
			wrapper = '<div>';
			for ( var i = 0; i < parts; i++ ) {
				wrapper += '<div style="float:left;overflow: hidden; width: '+(wdt/parts)+'px;"><img src="'+this.src+'" style="margin-left: -'+ ((wdt/parts)*i) +'px" /></div>';
			}
			wrapper += '</div>';
			wrapper = $( wrapper );
			$('div', wrapper).each(function ( i ) {
				$(this).animate({opacity: 0.3}, i * 300).animate({opacity: 1}, i * 300, function () {
					if ( i === parts - 1 ) {
						$(g).show().next().remove();
					}
				});
			});
			$(this).hide().after( wrapper );
		});
	}
})( jQuery );

Проблема заключается в том, что изображения в формате PNG во время анимации искажаются (пример: http://s42.radikal.ru/i098/1008/97/9481b6716dc3.jpg, во время анимации http://i078.radikal.ru/1008/73/c1c91ae54c60.jpg). Если же использовать другой формат, то в начале и конце анимации наблюдается небольшой сдвиг по ширине ~20px. Из-за чего это случается и как исправить?