Question

我使用2 <div>制作了一个图像推子（一个是图像，另一个是包含多个图像的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);          
});

Answer 2

删除()和引号

   setInterval(rotateImage, 4000);

Answer 3

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

更改为

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

setInterval与chrome无法正常工作

3 个答案: