JQuery 淡入问题

Question

我接到的任务是将 Flash 动画转换为 JQuery。这就是我试图让我的 Jquery 代码执行的操作，这里是 Flash 动画:http://www.thedesigncommonwealth.com/durangoSlideshow.html 。

这是我的 Jquery 到目前为止的样子:http://www.lisa.netii.net/test-for-durango.html

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

第一张幻灯片也有问题。目前html中的#slide2应该是slide1，但由于某种原因，动画开始在slide2上运行，而#slide1上没有任何反应，所以我将#slide1更改为#slide2，但这显然不是一个好的解决方案。我可以一次迈出一步......

谁能告诉我如何解决淡入问题？ 这是我的 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 网站链接。

非常感谢您提前提供的帮助!

Answer 1

试试这个:

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>

或任何其他未使用的属性和 w3c-konform。但我认为 class-Attribute 是最好的。如果class-Attribute有其他值，可以用空格分割.split(' ')并捕获索引。

之后您可以通过以下方式读出延迟:

var delay = parseInt(jQuery('#slide1').attr('class').replace('delay-',''), 10);

所以你的函数应该是这样的:

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