Question

For this HTML snippet :

<header>
<h1>Title</h1>
<h2>my first sentence</h2>
</header>

I run this Jquery script :

$('header h2').hover(function(){
    $(this).text("my second sentence");
}, function() {
    $(this).text("my first sentence");
});

I would like to add a fade in / fade out transition between the two states.

I tried adding .fadeIn(“slow”) and .fadeOut(“slow”) just after $(this) but it does not work. Could you bring me some help please ?

PS : i’m using JQuery instead of CSS :hover because CSS :before(content) trick does not work with transition : cf. Change text on hover, then return to the previous text

Answer 1

$( function() {
var fs = $('h2').text();
var ss = 'my second sentence';
$('h2').hover(function(){
    $(this).hide().text(ss).fadeIn("slow");
}, function() {
    $(this).hide().text(fs).fadeIn("slow");
});
});

For fadeIn() you need to hide() that element first. I declared two variables not necessary but will help you. var fs (first sentence) and var ss (second sentence).

Fiddle