setInterval не работает должным образом с хромом

Question

Я сделал фейдер изображения, используя 2 <div> s (одно изображение, а другое - это ul, содержащее несколько изображений) сценарий отлично работает на Firefox и Safari, но не работает должным образом Chrome, он просто делает первый увядает, а затем он останавливается сценарий это

$("#second").css({ 
    opacity: 0.0 
}); 

$(function() { 
    setInterval("rotateImages()", 4000); 
}); 

function rotateImages() { 

    if ($("#first").css("opacity") == 1) { 
     $("#first").animate({ 
      opacity: 0.0 
     }, 1500); 
     $("#second").animate({ 
      opacity: 1.0 
     }, 1500); 
    } else { 
     $("#second").animate({ 
      opacity: 0.0 
     }, 1500); 
     $("#first").animate({ 
      opacity: 1.0 
     }, 1500); 
    }; 

}; 

Я не знаю, где именно проблема и как сделать работу скрипта на всех браузерах. любая помощь была бы оценена

Благодаря

Answer 1

() Удалить и котировки

setInterval(rotateImage, 4000); 

Answer 2

$(function(){ 
    setInterval("rotateImages()", 4000); 
}); 

изменение

setInterval(function(rotateImages()), 4000); 

Answer 3

Это работает для меня

Live Demo

$(function() { 
    $("#second").css({ 
    opacity: 0.0 
    }); 
    setInterval(rotateImages, 4000);  
}); 
function rotateImages() { 
    if ($("#first").css("opacity") == 1) { 
     $("#first").animate({ 
      opacity: 0.0 
     }, 1500); 
     $("#second").animate({ 
      opacity: 1.0 
     }, 1500); 
    } else { 
     $("#second").animate({ 
      opacity: 0.0 
     }, 1500); 
     $("#first").animate({ 
      opacity: 1.0 
     }, 1500); 
    }; 

}; 

Однако это может быть гораздо проще.

Например this almost works, но this one is better

$(function() { 
    var $first = $("#first"); 
    var $second = $("#second"); 
    $("#second").hide(); 

    var tId = setInterval(function() { 
     $first.fadeToggle("slow",function() { 
     $second.fadeToggle("slow"); 
     })  
    },4000);   
});