Пишу слайдер. У текущего изображения в слайдере есть css анимация(увеличение и поворот изображения).
Когда я перехожу на предыдущий слайд, текущее изображение на долю секунды возвращается в свое первоначальное состояние,т.е становится не повернутым и не увеличеным. Выглядит не очень красиво.
Когда листаю следующие слайды, то этой проблемы нет..
В чем дело?
Код слайдера:
var slidePath = '.testSlider > div.slide';
var sliderDuration = 53000;
var rotate = setInterval(slideShow, sliderDuration);
$(slidePath).hide();
slideShowFirst();
$('.slider-block').hover(function() {
clearInterval(rotate);
}, function() {
rotate = setInterval(function() {
slideShow();
}, sliderDuration);
});
$('.control-right').click(slideShow);
$('.control-left').click(function() {
$(slidePath + ':last-child').fadeOut('slow');
$(slidePath + ':eq(-2)').fadeIn('slow');
$(slidePath + ':last-child').prependTo('.testSlider');
});
function slideShow() {
$(slidePath + ':last-child').fadeOut('slow');
$(slidePath + ':first-child').fadeIn('slow').appendTo('.testSlider');
}
function slideShowFirst() {
$(slidePath + ':first-child').appendTo('.testSlider').show();
}