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

我非常接近我想要的，但是在这方面需要更多帮助。

$('.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

最佳答案

您可以通过为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>