Question

对于此HTML代码段：

<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

我建议：

// 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

参考文献：

Answer 2

$( 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

悬停时Jquery文本更改为转换

2 个答案: