如何在悬停时顺利更改单词

Question

悬停时如何顺利更改单词？

示例 This effect, but only on hover

代码

HTML

<ul>
    <li>Link 01<span>Link 01 altertext</span></li>
    <li>Link 02<span>Link 03 altertext</span></li>
    <li>Link 03<span>Link 03 altertext</span></li>
</ul>

CSS

ul li span{
    display:none;
}

应该是导航。只有<li>中的字词应随<span>更改。在鼠标移出时，<span>应该再次隐藏。

Answer 1

以下是代码：

HTML

<span class="words">
  <span>Link 01</span>
  <span>Link 02</span>
  <span>Link 03</span>
</span>

JS：

var $words = $('.words'),
    interval = 2000,
    nextWord = 0;

$words.each(function(index, element) {
  var $elem = $(element),
      $spans = $elem.find("span");

  $spans.eq(0).addClass('active');

  var animateFunc = function(){
    nextWord = $elem.find('.active').next().length ? $elem.find('.active').next().index() : 0;
    $elem.find('.active').addClass('fade-out').removeClass('fade-in active');
    $spans.eq(nextWord).addClass('fade-in active').removeClass('fade-out');
  };

  setInterval(animateFunc,interval);
});

工作小提琴： http://jsfiddle.net/H6rQ6/16954/