используя .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, а затем для того, чтобы исчезать и отображать Wanna Be 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>