Анимация изображения по частям
Суть скрипта: разбиваем изображение на несколько вертикальных полосок и анимируем их по очереди.
Имеется вот такой код:
(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. Из-за чего это случается и как исправить? |