Question

我有一个脚本，每6秒打印一个新的数组元素。现在我想添加每个Interval a Class（Css Animation）并在之后删除它。这样每个数字都会淡入（并且在我的css动画中出现）。我曾试图为整个h2＃引号设置动画 - 但它似乎与script / css完全不同。这是一个实例：http://quotes.sumisuweb.at/

   var quoteIndex = 0;
var quoteJson = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];


var setQuote = function() {

    var quote = quoteJson[quoteIndex];
    quoteIndex = (quoteIndex + 1) % quoteJson.length; 
    setTimeout(setQuote, 6000);
    $("#quote").text(quote);
  }


  jQuery( document ).ready(function($) {
    setQuote();
    });

CSS：

    #quote {
    text-shadow: 0px 0px 13px white; 
    text-align: center;
    margin-top: 100px;
    font-size: 100pt;
}

.animateQuote {
    animation-name: fadeIn;
    animation-duration: 6s;
    animation-timing-function: linear;
}

@keyframes fadeIn {
    0% {opacity: 0.0;}
    80% {opacity: 1.0;}
    100% {opacity: 0.0;}
}

Answer 1

我认为您不需要超时来添加/删除课程。

您可以将动画设置为重复，然后在更新数字的同时开始动画。

更新了包含更改注释的代码：

编辑：修复了动画与超时不同步的错误。来自here和here的修正。

还使动画/超时1秒。因此，测试更多迭代更容易

var quoteIndex = 0;
var quoteJson = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
var $quote = null;


var setQuote = function() {
  $quote[0].style.animation = 'none'; // remove the animation
  void $quote[0].offsetWidth; // trigger reflow
  $quote[0].style.animation = null; // add the animation back

  var quote = quoteJson[quoteIndex];
  quoteIndex = (quoteIndex + 1) % quoteJson.length;
  $quote.text(quote);
  setTimeout(setQuote, 1000); // needs to be same time as animation
}


jQuery( document ).ready(function($) {
  $quote = $("#quote");
	setQuote();
});

#quote {
    text-shadow: 0px 0px 13px white; 
    text-align: center;
    margin-top: 100px;
    font-size: 100pt;
    animation: fadeIn 1s linear infinite; /* needs to be same time as timeout */
}

@keyframes fadeIn {
    0% {opacity: 0.0;}
    80% {opacity: 1.0;}
    100% {opacity: 0.0;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="quote"></div>

Answer 2

我非常确定setTimeout和jquery动画中的时间参数无法在一段时间内保持彼此同步。

我不是定期更改引号，而是管理您希望保持同步的定期动画，而是使用单一方法将这两件事放在一起：

＆＃13;

var quoteIndex = 0;
var quoteJson = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];


var setQuote = function() {
    var quote = quoteJson[quoteIndex];
    quoteIndex = (quoteIndex + 1) % quoteJson.length;
    var elem = $('#quote');
    elem.animate({opacity: 0}, 1000, function() { // hide for 1s
      elem.text(quote); // updated here for sure when hidden
      elem.animate({opacity: 1}, 3000, function() { // fade in for 3s
        setTimeout(setQuote, 2000); // wait for 2s
      });
    });
};


$(document).ready(function() {
   setQuote();
});

＆＃13;

#quote {
    text-shadow: 0px 0px 13px white; 
    text-align: center;
    margin-top: 100px;
    font-size: 100pt;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 id="quote">1</h2>

＆＃13;

JS setTimeout每隔一段时间添加/删除类

2 个答案: