如何在悬停时流畅地更改单词

How to change a word smoothly on hover

本文关键字：单词 悬停      更新时间：2023-09-26

悬停时如何平滑地更改单词？

示例此效果，但仅适用于悬停

代码

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>应再次隐藏。

以下是代码：

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/

相关文章：