Простой JQuery фейдер не работает в Chrome

Question

Я построил очень простую галерею с затуханием изображений, которая работает в Firefox (и я уверен, что работал над Chrome до праздников).Однако теперь Chrome просто затеняет первое изображение и никогда не применяет класс .first, поэтому последующая анимация пропускается.

JS

function doRotator(time){

$('.rotator3 .property.first').fadeOut(1500, function(){                         
        $('.rotator3 .property.first').removeClass('first').next(".property").addClass('first').fadeIn(1500);                                      
        $(this).appendTo('.rotator3');                                                                                                                             });                                      
}

setInterval(function () { doRotator(3000);}, 3000); 

JSFiddle: http://jsfiddle.net/pkyAS/1/

Answer 1

под каждым «свойством» div у вас есть div с «opacity: наследовать» удалить «opacity: наследовать», и это должно работать. дайте мне знать, если есть еще проблемы.

Вот мое решение по скрипке . Я удалил ваш интервал и сделал «doRotator» запущенным один раз - мне было легче отлаживать

Кстати - fadeIn (1500) на вашем интервале времени. Если ваш интервал составляет 3000 миллисекунд, а у вас fadeIn (1500) - тогда div будет виден в течение 1,5 сек.

Подумайте о срабатывании «setTimeout (doRotator, 3000)» с 3000, когда заканчивается fadeOut.

РЕДАКТИРОВАТЬ: как принудительно удалить «непрозрачность: наследовать» - вы можете просто добавить некоторый код JS для этого.

    function doRotator(time){ 

     $('.rotator3 .property.first').fadeOut(1500, function(){                              
      $('.rotator3 .property.first').removeClass('first').next(".property")
.addClass('first').fadeIn(1500).find("div:first").css("opacity",null);                                          $(this).appendTo('.rotator3');                                                                                                                         });                                      
    }
    setInterval(function () { doRotator(3000);}, 3000);