Question

I have built a really simple image fading gallery sorta thing, which works on firefox (and I’m sure worked on chrome before the holidays). However now Chrome just fades out the first image and never applies the .first class so subsequent animation is skipped.

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

under each “property” div you have a div with “opacity:inherit” remove the “opacity:inherit” and it should work. let me know if there are more problems.

Here is my solution on fiddle.
I removed your interval, and made the “doRotator” run once – it was easier for me to debug

By the way – fadeIn(1500) is on your interval time.
If your interval is for 3000 millis, and you have fadeIn(1500) – then the div will be visible for 1.5 sec.

Consider triggering “setTimeout(doRotator,3000)” with 3000 when the fadeOut finishes.

EDIT : how to force removal of “opacity:inherit” – you can simply append some JS code to force that.

    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);