Затухание каждого слова слайда по одному

Question

У меня есть функция, которая затухает каждое слово по одному. Я пытаюсь вызвать эту функцию вместо вызова fadeIn для своих слайдов, но я теряю то, что я бы назвал функцией, чтобы сделать эту работу.

Я создал скрипку 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

Я обновил скрипку. 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); 

Посмотрите на это как вложенный для каждой петли (я знаю, что это рекурсия, но она моделирует так же): для каждого слайда в слайдере для каждой линии на слайде для каждого слова в строке.

Если вам нужно дополнительное разъяснение, сообщите мне, и я буду рад помочь.