javascript - jQuery fade in/out replaced text removes link -

demo: jsfiddle

this works correctly should when comes fadein/out part h1 child being href tag gets removed on hover - want keep a tag.

this causes trouble -webkit-text-fill-color: transparent; -webkit-background-clip: text; if animate tag cause jumpy animation (chrome). i've discovered if animate parent being h1 animation runs smoothly

structure should be:

<div id="heroburrito">     <div class="vert">          <h1>             <a class="homehover" href="#"></a>  <!--this parts gets removed on hover - shouldn't-->         </h1>     </div> </div> 

js

$('#heroburrito .vert h1 a.homehover').attr('data-originaltext', function () {     return (this.textcontent || this.innertext).trim(); }).hover(function () {     $(this).fadeout(660, function () {         $(this).text('←retreat').fadein().addclass('home').idle(200);     }); },  function () {     $(this).fadeout(660, function () {         $(this).text($(this).attr('data-originaltext')).fadein().removeclass('home');     }); }); 

well, using $(this).text(...) - replaces entire content of element referred this - h1 element. instead, should attach code a element inside h1:

$('#heroburrito .vert h1 a.homehover').hover(...) 

this correct in question, fiddle contained

$('#heroburrito .vert h1').hover(...) 

thus replacing entire link plain text. here's updated fiddle works correctly.

edit: if need run fade in/out on h1 instead of link itself, need apply text change link - here's updated fiddle:

$('#heroburrito .vert h1').hover(function () {     $(this).fadeout(200, function () {         $('a.homehover', this).text('←retreat');         $(this).fadein().addclass('home')     }); },  function () {     $(this).fadeout(200, function () {         $('a.homehover', this).text($(this).attr('data-originaltext'));         $(this).fadein().removeclass('home');     }); });