Question

我有一个逐个淡化每个单词的函数。我正在尝试调用此函数而不是为我的幻灯片调用fadeIn，但我在输入函数以使其工作失败。

我希望幻灯片转换然后逐个淡化每个单词，而不是所有内容中的过渡淡入淡出然后逐渐淡入每个单词，因为它当前正在运行。

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

我更新了小提琴。 http://jsfiddle.net/d6r7gffs/5/是自动播放，http://jsfiddle.net/d6r7gffs/4/包含在一个函数中，因此您可以在到达结尾时重新启动滑块。

我简化了一下代码。此外，在您的示例中，实际上并不清楚什么是幻灯片，什么是一行。这条线有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);

看看这就像每个循环的嵌套（我知道它的递归，但它以相同的方式建模）：对于滑块中的每个幻灯片对于幻灯片上的每一行对于在线的每个单词。

如果您需要进一步澄清，请告诉我，我们将很乐意为您提供帮助。

逐个淡化幻灯片的每个单词

1 个答案: