1

对于这个 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。悬停时更改文本，然后返回上一个文本

4

2 回答 2

4 
$( 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() 你需要先 hide() 那个元素。我声明了两个不必要的变量，但会对您有所帮助。var fs（第一句）和var ss（第二句）。

小提琴

于 2013-01-19T17:04:24.107 回答
4

我建议：

// 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 小提琴演示。

参考：

于 2013-01-20T05:01:56.207 回答