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

Question

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

Answer 1

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>