javascript - 回到原始div时jQuery FadeTo不起作用

我认为开发滑动器功能以自动间隔从一个div淡入下一个是一个有趣的项目。有用！但是由于某种原因，当它退回到第一张幻灯片时，淡入淡出的动画只是停止工作，而在前进到下一张幻灯片及以后的幻灯片时才恢复工作。只有从最后一张幻灯片切换到第一张幻灯片，动画才会失败。这对我来说没有意义，因为除了索引之外，用于前进和重新启动的代码本质上是相同的。

我尝试了z-index，尝试将hide / show与FadeTo结合使用，尝试了全部三个方法的组合。似乎没有解决问题。

我将代码添加到输出到控制台，以查看出了什么问题，但没有发现任何问题。我敢肯定这是一个微妙而又至关重要的事情-但它一直在躲避我。因此，任何见解都值得赞赏！

代码和工作示例可以在这里看到：http://jsfiddle.net/cawwM/

这是进行幻灯片切换的功能：

    function toggleSlides(slideArray) {
        var currentSlideIndex = 0;
        var slideLength = slideArray.length;
        window.console&&console.log('Slide Toggle interval fired. \n');
        window.console&&console.log('Searching for current slide... \n');
        $.each(slideArray,function(index, value){
            if($('#'+value).hasClass('currentSlide') === true) {
                currentSlideIndex = index;
                window.console&&console.log('Current slide identified. \n');
                return (false); // break loop, we have index.
            }
        });
        if(currentSlideIndex < slideLength - 1) {
            // Advance to next slide
            window.console&&console.log('Still more slides ('+currentSlideIndex+' < '+(slideLength - 1)+'). Advancing to next slide now. \n');
            $('#'+slideArray[currentSlideIndex]).removeClass('currentSlide');
            $('#'+slideArray[currentSlideIndex+1]).addClass('currentSlide');
            $('element').css('z-index', 9999);
            $('#'+slideArray[currentSlideIndex+1]).show().fadeTo('slow', 1, function() {
                $('#'+slideArray[currentSlideIndex]).fadeTo(0, 0).hide().css('z-index', 1);
            }).css('z-index', 5);
        } else {
            // Go back to the first slide
            window.console&&console.log('No further slides, going back to first slide now. \n');
            $('#'+slideArray[currentSlideIndex]).removeClass('currentSlide');
            $('#'+slideArray[0]).addClass('currentSlide');
            $('#'+slideArray[0]).show().fadeTo('slow', 1, function() {
                $('#'+slideArray[currentSlideIndex]).fadeTo(0, 0).hide().css('z-index', 1);
            }).css('z-index', 5);
        }
        window.console&&console.log('Done with slide toggling. \n');
    }

再次感谢您提供反馈！如果您看到我可以改善代码的方法，也将不胜感激-我一直热衷于通过学习更好的方法来提高自己的技能。

最佳答案

问题出在这行，Done with slide toggling之前的行

$('#'+slideArray[currentSlideIndex]).fadeTo(0, 0).hide().css('z-index', 1);

删除hide()方法并应用slow效果。

$('#'+slideArray[currentSlideIndex]).fadeTo('slow', 0).css('z-index', 1);

删除hide()不会立即隐藏最后一张幻灯片

FIDDLE

关于javascript - 回到原始div时jQuery FadeTo不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17798649/