Question

我正试图让一些文字淡出，更改，并定期淡入并自动（即没有按钮）。

我无法使用此代码将setInterval与淡入淡出同步。我尝试过fadeToggle以及fadeIn和fadeOut的组合。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

 <div id="changeText">Zero</div>

 <script type="text/javascript">
    var text = ["One", "Two", "Three"];
    var counter = 0;
    var elem = document.getElementById("changeText");

    setInterval(change, 3000);
    function change() {

    $("#changeText").fadeToggle(3000);

     elem.innerHTML = text[counter];
        counter++;
        if(counter >= text.length) { counter = 0; }

    }
    </script>

PS我对解决方案不了解。如果这可以在CSS中更优雅地完成（我已经用于褪色而不是过渡），请告诉我。

Answer 1

尝试使用.fadeTo()，remainder运算符

＆＃13;

var text = ["One", "Two", "Three"];
var counter = 0;
var elem = document.getElementById("changeText");

function change() {
  $(elem).fadeTo(3000, 0, function() {
    this.innerHTML = text[counter];
    counter = ++counter % text.length;
    $(this).fadeTo(3000, 1, change)
  })
}

change()

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<div id="changeText">Zero</div>

<script type="text/javascript">
</script>

＆＃13;

Answer 2

有一百万种皮肤猫的方法。如果你想做fadeToggle，我也不会使用setInterval，因为它们会同时被调用并相互抵消。

要记住的一点是，fadeToggle不仅会影响不透明度，还会在隐藏对象时将其关闭，这可能会影响您的布局。

docs/partner_platform/example_app_ipp_v3/config.php

Answer 3

我不确定这是如何比较性能的。此实现没有依赖关系。

(function() {
  var STEP  = 0.1;
  var x = 0;
  var text  = ['one', 'two', 'three'];
  var element = document.querySelector('#changeText');

  if(!element) { return; }
  element.innerText = text[0];
  requestAnimationFrame(change);

  function change() {
    var y = Math.sin( x );
    var opacity = (y + 1) / 2;

    x += STEP;
    element.style.opacity = opacity;

    if(y <= -0.99 && Math.sin(x) > -0.99) {
      var txtIdx = text.indexOf(element.innerText);
      if(txtIdx === text.length - 1) {
        element.innerText = text[0];
      } else {
        element.innerText = text[++txtIdx];
      }
    }
    requestAnimationFrame(change);
  }
})()

在定时器的文本转盘与淡入，淡出

3 个答案: