Question

我试图与此文字滑块https://www.lynda.com/in/general3非常相似在第一张幻灯片中，它逐段显示，然后在第二个滑块上同时显示整个段落。我已经实现了这个，但我的问题是我无法在第一个div上逐个显示文本并循环它

(function() {

    var quotes = $(".quotes");
    var quoteIndex = -1;

    function showNextQuote() {
        ++quoteIndex;
        quotes.eq(quoteIndex % quotes.length)
            .fadeIn(2000)
            .delay(2000)
            .fadeOut(2000, showNextQuote);



    }

    showNextQuote();

})();


$(document).ready(function(){
    var numOfLines = 2;
    var delay = 1000;
    var fadeTime = 1000;
    for (i = 0; i < numOfLines + 1; i++) { 
       $('#delayedText' + i).delay(delay * i).fadeIn(fadeTime);
    }
});

http://jsfiddle.net/d94gv2zm/ 先谢谢

Answer 1

建立你已经拥有的东西，你需要容纳你想要淡入的元素的容器，然后只是做你已经拥有的东西，但是对于每个内容片。

Codepen示例： https://codepen.io/tylerfowle/pen/goGWEX

(function() {

  var quotes = $(".slide");
  var quoteIndex = 0;
  var slideDuration = 0;
  var headlineDelay = 500;
  
  (function showSlide() {
    
    $this = quotes.eq(quoteIndex % quotes.length);
    $this.fadeIn(slideDuration).delay(2000).fadeOut(2000, showSlide);
    $this.find(".content").attr("style","");
    $this.find(".content").each(function(i){
      $(this).delay(headlineDelay * i).fadeIn(500);
    });
    
    
    ++quoteIndex;
  })();
  
})();

.slide {
  display: none;
}

.content {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class='slider'>
  <div class='slide'>
    <div class='content'>
      <h2>Slide 1 - Headline 1</h2>
    </div>
    <div class='content'>
      <h2>Slide 1 - Headline 2</h2>
    </div>
    <div class='content'>
      <h2>Slide 1 - Headline 3</h2>
    </div>
  </div>
  <div class='slide'>
    <div class='content'>
      <h2>Slide 2 - Headline 1</h2>
    </div>
    <div class='content'>
      <h2>Slide 2 - Headline 2</h2>
    </div>
  </div>
</div>

Answer 2

看看这是否能达到你想要的效果：

jQuery(function ($) {
    var $quotes = $('.quotes');
  
    function loop() {
        setTimeout(function () {
            $quotes.eq(0).fadeIn(1000, function () {
                setTimeout(function () {
                    $quotes.eq(1).fadeIn(1000, function () {
                        setTimeout(function () {
                            $quotes.fadeOut(1000, function () {
                            /* Begin the recursiion here */
                            loop();
                        });
                    }, 500)
                });
            }, 500);
        });
      }, 500);
  }
  
  loop();
});

.quotes {display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<h2 class="quotes">first quote</h2>
<h2 class="quotes">second quote</h2>

以上代码段使用一系列setTimeout()和.fadeIn()例程来模拟您在 Lynda 示例中显示的文字。像这样递归地调用setTimeout()可确保动画在下一次迭代开始之前完成，并且在这种情况下比使用setInterval()更安全一些。这里使用递归会在不使用JavaScript中可用的核心循环结构的情况下创建一些伪循环。我在此answer中详细介绍了为什么会更详细。

Answer 3

你可以用纯CSS实现它：

HTML：

num2words(4458, lang="en", to="ordinal")
'four thousand, four hundred and fifty-eighth'

CSS：

<h2 class="quotes quote1">first quote</h2>
<h2 class="quotes quote2">second quote</h2>
<h2 class="quotes quote3">third quote</h2>

http://jsfiddle.net/d94gv2zm/3/

淡化单个和旋转文本Jquery

3 个答案: