javascript - jQuery .flip() 在 2 秒间隔内不起作用

Question

我有 3 个单词，我想以 2 秒的间隔在 x 轴上翻转(重复)。

jQuery:

$(function () {
count = 0;
wordsArray = ["Quality", "Performance", "Solutions"];
setInterval(function () {
    count++;

    $("words").text(wordsArray[count % wordsArray.length]).flip({ axis: 'x' });

    }, 2000);
});

HTML:

<span id="words">Solutions</span>

没有翻转，什么也没有发生。

我可以使用以下代码使单词淡入和淡出:

$(function () {
count = 0;
wordsArray = ["Quality", "Performance", "Solutions"];
setInterval(function () {
    count++;
    $("#words").fadeOut(400, function () {
        $(this).text(wordsArray[count % wordsArray.length]).fadeIn(400);
    });
    }, 2000);
});

我已经包括:

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="~/js/jquery.flip.js"></script>

.flip() 来自:https://nnattawat.github.io/flip/

我在翻转单词的函数中遗漏了一些东西？

Answer 1

flip() 的指令需要具有 front 和 back 类的子元素。

复制自 https://nnattawat.github.io/flip/

<div id="card"> 
  <div class="front"> 
    Front content
  </div> 
  <div class="back">
    Back content
  </div> 
</div>

尝试你的 html

<span id="words"> 
  <span class="front"></span> 
  <span class="back"></span> 
</span>

和你的 JavaScript:

$(function () {
count = 0;
wordsArray = ["Quality", "Performance", "Solutions"];
setInterval(function () {
    count++;
    $("#words").text(wordsArray[count % wordsArray.length]).flip({ axis: 'x' });    
    }, 2000);
});