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（）的指令需要具有前后类的子元素。

从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);
});

jQuery .flip（）关于2秒间隔不起作用

1 个答案: