悬停时带有过渡的Jquery文本更改

Question

对于这个 HTML sn-p：

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

我运行这个 Jquery 脚本：

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

我想在两种状态之间添加淡入/淡出过渡。

我尝试在 $(this) 之后添加 .fadeIn("slow") 和 .fadeOut("slow") 但它不起作用。能给我一些帮助吗？

PS：我使用 JQuery 而不是 CSS :hover 因为 CSS :before(content) 技巧不适用于过渡：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");
});
});

对于fadeIn()，你需要先隐藏()那个元素。我声明了两个不必要的变量，但会对您有所帮助。 var fs（第一句）和var ss（第二句）。

Fiddle

Answer 2

我建议：

// find the relevant element(s)
// assign the current text to a custom data-* attribute (for later)
$('header h2').attr('data-originalText', function () {
    // using this not $(this), since a jQuery object requires more 'work'
    return (this.textContent || this.innerText).trim();
}).hover(function () {
    // fading out the current element, replacing the text and then fading back in
    $(this).fadeOut(600, function () {
        $(this).text('my new sentence!').fadeIn();
    });
},
function () {
    // fading out the current element, replacing the text (from the data-* attribute)
    // and fading back in
    $(this).fadeOut(600, function () {
        $(this).text($(this).attr('data-originalText')).fadeIn();
    });
});

JS Fiddle demo.

参考资料：

• attr()。
• fadeIn()。
• fadeOut()。
• hover()。
• jQuery.trim()。
• text()。