悬停时如何顺利更改单词?
示例 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>
应该再次隐藏。
答案 0 :(得分: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);
});