javascript - 将幻灯片中的每个单词一一淡入淡出

Question

我有一个函数可以将每个单词一一淡入淡出。我正在尝试调用此函数，而不是为我的幻灯片调用 fadeIn，但我不知道在哪里调用该函数来使其工作。

我创建了一个 fiddle http://jsfiddle.net/d6r7gffs/

我希望幻灯片过渡，然后将每个单词一一淡入淡出，而不是在所有内容中过渡淡入淡出，然后在当前运行时将每个单词一一淡入淡出。

var $slider = $('.example ul'); // class or id of carousel slider
        var $slide = 'li'; // could also use 'img' if you're not using a ul
        var $transition_time = 1000; // 1 second
        var $time_between_slides = 8000; // 8 seconds

        function slides(){
            return $slider.find($slide);
        }

        slides().fadeOut();

        // set active classes
        slides().first().addClass('active');
        slides().first().fadeIn($transition_time, fadeWordsIn);


        // auto scroll 
        $interval = setInterval(function() {

            var $i = $slider.find($slide + '.active').index();

            slides().eq($i).removeClass('active');
            slides().eq($i).fadeOut($transition_time);

            if (slides().length == $i + 1) $i = -1; // loop to start

                slides().eq($i + 1).fadeIn($transition_time, fadeWordsIn);
                slides().eq($i + 1).addClass('active');

            }, $transition_time +  $time_between_slides

        );

        function fadeWordsIn() {
            var $el = $('.example ul li.active span'), text = $.trim($el.text()),
                words = text.split(" "), html = "";

            for (var i = 0; i < words.length; i++) {
                html += "<span>" + words[i] + ((i+1) === words.length ? "" : " ") + "</span>";
            };
            $el.html(html).children().hide().each(function(i){
              $(this).delay(i*200).fadeIn(700);
            });
            $el.find("span").promise().done(function(){
                $el.text(function(i, text){
                   return $.trim(text);
                });            
            });
        }

Answer 1

我更新了 fiddle 。 http://jsfiddle.net/d6r7gffs/5/是自动播放并且 http://jsfiddle.net/d6r7gffs/4/包含在一个函数中，因此您可以在 slider 到达末尾时重新启动 slider 。

我稍微简化了代码。另外，在您的示例中确实不清楚什么是幻灯片，什么是线条。该行具有 position:absolute;，因此它们会出现在彼此的顶部(这些应该是幻灯片吗？)。不管怎样，我给了 ul 类 slide 以便清楚示例中的元素应该是什么。如果这不是您的本意，您应该能够了解如何根据您的需求进行修改。

(function ($) {
    var linePause = 2000;
    var wordPause = 100;
    var slidePause = 8000;

    //this will execute on load to parse the words into spans
    $('.example ul.slide > li').each(function(){
        var words = $(this).html().split(' ');
        $(this).html('').hide();
        for(var i = 0; i < words.length; i++){
            $(this).append($('<span></span>')
                .text(words[i] + (i+1 == words.length ? '' : ' '))
                .hide());
        }
    });
    //this will run the animation on the created spans
    (function showNextSlide(slide){
        slide.eq(0).fadeIn(500, function(){
            (function showNextLine(line){   
                line.eq(0).fadeIn(500, function(){
                    (function showNextWord(word){
                        word.eq(0).fadeIn(wordPause, function(){
                            (word=word.slice(1)).length && showNextWord(word);
                        });
                    })(line.eq(0).find('span'));
                })
                .delay(linePause)
                .queue(function(){
                    (line=line.slice(1)).length && showNextLine(line);
                    $(this).dequeue();
                });
            })(slide.eq(0).find('li'));
        })
        .delay(slidePause)
        .fadeOut(500, function(){
            (slide=slide.slice(1)).length && showNextSlide(slide);
        });
    })($('.slide'))
})(jQuery);

将其视为每个循环的嵌套(我知道这是递归，但它的建模方式相同): 对于 slider 中的每张幻灯片 对于幻灯片上的每一行 对于行上的每个单词。

如果您需要更多说明，请告诉我，我很乐意为您提供帮助。