javascript - setInterval 无法与 chrome 正常工作

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

这对我有用

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