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上，然后将其淡入并显示想成为CodeNinja，然后再次在mouseout上显示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>

使用.fadeToggle（）淡入文本并在悬停时淡出

1 个答案: