如何通过过渡更改鼠标悬停的文本答案

【问题标题】：How to change text on mouse over with transition如何通过过渡更改鼠标悬停的文本
【发布时间】：2016-05-13 10:49:42
【问题描述】：

我试着去了解这是如何完成的。我只知道它使用 jquery

http://www.marieforleo.com/

查看左上角的徽标/文本...当您将鼠标悬停在它上面时，它会显示带有过渡的随机文本，并在鼠标移出时默认返回站点名称。

这是怎么做到的？

非常感谢。

【问题讨论】：

可以用javascript（jquery，velocity，没关系）或纯css来完成。尝试在 chrome 中检查该徽标。好吧，也许不是 css（因为文本总是不同的）。
它可能只是一组句子，在鼠标悬停时，将随机选择一个并放置为文本，然后会发生滑出动画 - 或者在这种情况下，它们似乎附加了一个字母当时
你应该仍然能认出我的答案。你知道我已经付出了一些努力:)
抱歉 AIFra，非常感谢您抽出宝贵时间帮助我。我离开了一天，前一天很忙，我刚刚在 10 分钟前看到关于您的回答的消息，然后直接来到这里。非常感谢，再次抱歉！

标签： jquery transition mouseover

【解决方案1】：

希望对您有所帮助！它不完全一样，但仍然......您仍然可以改进一些功能，并且您可以致力于代码的可重用性。

(function($) {

  var logo = $("#logo"),
    originalText = logo.html(),
    altLogoTextArray = ["make it count.", "make peace.", "make art not war.", "make something out of yourself."],
    chosenText,
    timeOut = null;

  function animateText(text, startFrom, length, delay) {
    var strlen = text.length;
    if (startFrom + length > strlen) {
      return;
    }
    timeOut = window.setTimeout(function() {
      logo.html(text.substr(0, startFrom) + text.substr(startFrom, length));
      //testText.html(startFrom + length);
      animateText(text, startFrom, length + 1, delay);
    }, delay);
  }

  function getRandomTextFromArray(arr) {
    var arrLength = arr.length,
      randInt = Math.floor(Math.random() * (arrLength - 0)) + 0;
    return arr[randInt];
  }

  logo.on('mouseenter mouseleave', function(e) {
    window.clearTimeout(timeOut);
    if (e.type == "mouseenter") {
      chosenText = getRandomTextFromArray(altLogoTextArray);
      animateText(chosenText, 3, 0, 20);
    } else if (e.type == "mouseleave") {
      animateText(originalText, 3, 0, 20);
    }
  });

})(window.jQuery);

#logo {
  font-size: 30px;
  min-width: 500px;
  display: inline-block;
  zoom: 1;
  cursor: pointer;
}

#logo:after {
  content:"";
  display:block;
  height:1px;
  width:22px;
  background:#000;
}

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

<span id="logo">marie forleo.</span>

【讨论】：

您好 AIFra，非常感谢您的回答，很抱歉没有早点回来，我离开了一天！我会尝试你的解决方案并告诉你它是如何工作的！再次感谢！