Question

我正在尝试使用Animate.css库来实现以下功能：淡化＆＃34;简单的灵气＆＃34;徽标以及一系列连续的<p>元素。每个<p>都需要一个接一个地淡入淡出。

查看相关网页

观测

显然，＆＃34;动画延迟＆＃34;不起作用。每个<p>元素都会立即与其他元素重叠。
似乎＆＃34;两者＆＃34;将继续努力 fadeIn并执行淡出。

以下是我的HTML和CSS的代码段：

＆＃13;

h1.animated {
  font-size: 5.5em;
  font-weight: normal;
  font-family: 'Allura', cursive;
  color: #e8e8ea;
  margin: auto;
  position: absolute;
  z-index: 1;
  animation: fadeIn forwards 7s 0.5s;
  opacity: 0;
}
p.animated {
  font-size: 1.5em;
  font-family: 'Muli', cursive;
  color: #e8e8ea;
  margin: auto;
  position: absolute;
  top: 105px;
  left: 45px;
  z-index: 1;
  opacity: 0;
}
p.animated1 {
  animation: fadeIn both 7s;
}
p.animated2 {
  animation-delay: 14s;
  animation: fadeIn both 7s;
}
p.animated3 {
  animation-delay: 21s;
  animation: fadeIn both 7s;
}

＆＃13;

<div class="hero-text-wrapper">
  <h1 class="animated">Simply Reiki</h1>
  <p class="animated animated1">Pure · Positive · Powerful</p>
  <p class="animated animated2">Just for today, I will not be angry.</p>
  <br>
  <p class="animated animated3">Just for today, I will not worry.</p>
  <br>
  <p class="animated animated4">Just for today, I will be grateful.</p>
  <br>
  <p class="animated animated5">Just for today, I will do my work honestly.</p>
  <br>
  <p class="animated animated6">Just for today, I will be kind to every living thing.</p>
</div>

＆＃13;

Answer 1

使用这样的javascript

.quotes {display: none;}

<h2 class="quotes">first quote</h2>
<h2 class="quotes">second quote</h2>

// code gets installed at the end of the body (after all other HTML)
(function() {

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

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

    showNextQuote();

})();

另见工作演示： http://fiddle.jshell.net/jfriend00/n4mKw/show/

为连续的文本行设置淡入淡出和淡出

1 个答案: