jqueryfadein问题

我的任务是将Flash动画转换为JQuery。这就是我试图让Jquery代码执行的操作，下面是flash动画：

到目前为止，这是我的Jquery：

我首先在左边工作，只是想在移动到另一边之前让它正常工作，时间在两边之间非常重要，我认为我的代码到目前为止可能能够处理这个问题。查看Jquery版本时，有几个明显的问题。首先，我在fadeIn效应方面遇到了麻烦。除第一个图像外，所有图像都会弹出屏幕，即使我使用.hide效果。我已经尝试在每个div的Jquery函数行中使用.hide，它似乎只对第一个图像有效，所有其他图像仍然会弹出到屏幕上

第一张幻灯片也有问题。html中当前的#slide2应该是slide1，但由于某种原因，动画开始在slide2上运行，而在#slide1上什么也没有发生，所以我将#slide1更改为#slide2，但这显然不是一个好的修复方法。我可以一步一步来

有人能告诉我我能做些什么来解决fadeIn问题吗？ 以下是我的Jquery代码：

$("#slide1").hide().fadeIn(200).delay(3000).fadeOut(4000);
var t2 = setTimeout(function(){
    $("#slide2").hide().fadeIn(4000).delay(5000).fadeOut(4000);
    var t3 = setTimeout(function(){
        $("#slide3").hide().fadeIn(4000).delay(10000).fadeOut(4000);
        var t4 = setTimeout(function(){
            $("#slide4").hide().fadeIn(4000).delay(5000).fadeOut(4000);
            var t5 = setTimeout(function(){        
                $("#slide5").hide().fadeIn(4000);
            }, 6500);
        }, 11500);
    }, 6500);
}, 6500);

要查看css和html，请参阅jquery网站链接

非常感谢您事先的帮助

试试这个：

var numberOfImages = 5;
var fadeInSpeed = 200;
var fadeOutSpeed = 200;
var pause = 6500;

function startSlideImage(index) {
   jQuery('#slide'+index).hide().fadeIn(200, function(){
      jQuery(this).delay(3000).fadeOut(fadeOutSpeed, function(){
         setTimeout(function(){
            startSlideImage(index+1);
         }, pause);
      });
   });
}

startSlideImage(1);

要添加不同的延迟时间，可以将此数据写入类属性，如：

<div id="slide1" class="delay-3000">...</div>

因此，您的函数应该如下所示：

function startSlideImage(index) {
   jQuery('#slide'+index).hide().fadeIn(200, function(){
      var delay = parseInt(jQuery('#slide1').attr('class').replace('delay-',''), 10);
      jQuery(this).delay(delay).fadeOut(fadeOutSpeed, function(){
         setTimeout(function(){
            startSlideImage(index+1);
         }, pause);
      });
   });
}

---

我需要能够在每个div/幻灯片上添加不同的延迟值。在这个例子中，我不确定如何做到这一点。也许如果上面的代码有解释。。。？谢谢你，里奇。

function startSlideImage(index) {
   jQuery('#slide'+index).hide().fadeIn(200, function(){
      var delay = parseInt(jQuery('#slide1').attr('class').replace('delay-',''), 10);
      jQuery(this).delay(delay).fadeOut(fadeOutSpeed, function(){
         setTimeout(function(){
            startSlideImage(index+1);
         }, pause);
      });
   });
}