.fadeToggle（）を使用してテキストをフェードインし、ホバーでフェードアウトする

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してから、再度マウスアウトディスプレイCodeNinjaにフェードインし、表示するために誰かにしたいです。

ああドメインに（あなたがテキストを設定したら、再びfadeToggle()を使用して、現在に基づいて新しいテキスト値を設定するtext()に機能を提供することにより、これを達成することができますwww.mrpben.net

Answer 1

です要素をもう一度表示します）、テキスト色を設定/設定解除する場合は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>