javascript - 使用 .fadeToggle() 淡入文本并在悬停时淡出

Question

我非常接近获得我想要的东西，但需要更多帮助。

$('.change').hover(function() {
  $(this).fadeToggle('slow', 'linear', function() {
    $(this).text('wanna be CodeNinja').css('color', 'grey');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>a <span class="change">CodeNinja</span>.</h1>

我只想有人将鼠标悬停在带下划线的 CodeNinja 上，然后让它淡入并显示 Wanna Be CodeNinja，然后在鼠标移开时再次显示 CodeNinja。

哦，域名是 www.mrpben.net

Answer 1

您可以通过向 text() 提供一个函数来实现这一点，该函数根据当前值设置新的文本值，一旦您设置完毕，再次使用 fadeToggle()文本(再次显示该元素)以及 toggleClass() 来设置/取消设置文本颜色。试试这个:

$('.change').hover(function() {
  $(this).fadeToggle('slow', function() {
    $(this).text(function(i, t) {
      return t == 'CodeNinja' ? 'wanna be CodeNinja' : 'CodeNinja';
    }).fadeToggle().toggleClass('over');
  });
});

.change.over {
  color: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>a <span class="change">CodeNinja</span>.</h1>