CODEWITHSUNDEEP
javascriptjqueryhtml
user2734006
user2734006

Reputation:

using .fadeToggle() to fade in text and fade out on hover

I am very close to getting what I want but need a little more help with this. 

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

I just want to someone to hover over the underlined CodeNinja and then for it to fade in and display Wanna Be CodeNinja and then on mouseout display CodeNinja again.

oh the domain is www.mrpben.net

Upvotes: 1

Views: 101

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337580

You can achieve this by providing a function to text() which sets the new text value based on the current, using fadeToggle() again once you've set the text (to display the element again) and also toggleClass() to set/unset the text colour. Try this:

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

Upvotes: 3

Related Questions