Question

DEMO： jsFiddle

这在fadeIn / out部分应该正常工作，但h1 href标记hover标记被<div id="heroburrito"> <div class="vert"> <h1> <a class="homehover" href="#"></a>  </h1> </div> </div>删除了 - 我想保留< strong> a 标记。

这也会导致-webkit-text-fill-color：transparent; -webkit-background-clip：text;因此，如果我为a标签设置动画，则会产生跳跃动画（chrome）。但是我发现，如果我为父节点设置动画为h1，则动画可以顺利运行

应该是

结构：

$('#heroburrito .vert h1 a.homehover').attr('data-originalText', function () {
    return (this.textContent || this.innerText).trim();
}).hover(function () {
    $(this).fadeOut(660, function () {
        $(this).text('←retreat').fadeIn().addClass('home').idle(200);
    });
},

function () {
    $(this).fadeOut(660, function () {
        $(this).text($(this).attr('data-originalText')).fadeIn().removeClass('home');
    });
});

JS

{{1}}

Answer 1

嗯，您正在使用$(this).text(...) - 这会替换this引用的元素的整个内容 - 这是您的h1元素。相反，您应该将代码附加到a：

中的h1元素

$('#heroburrito .vert h1 a.homehover').hover(...)

这在你的问题中是正确的，但你的小提琴只包含

$('#heroburrito .vert h1').hover(...)

因此用纯文本替换整个链接。这是我的updated fiddle正常工作。

编辑：如果您需要在h1而不是链接本身上运行淡入/淡出，那么您需要将文本更改应用于链接 - 这里是{{ 3}}：

$('#heroburrito .vert h1').hover(function () {
    $(this).fadeOut(200, function () {
        $('a.homehover', this).text('←retreat');
        $(this).fadeIn().addClass('home')
    });
},

function () {
    $(this).fadeOut(200, function () {
        $('a.homehover', this).text($(this).attr('data-originalText'));
        $(this).fadeIn().removeClass('home');
    });
});

Answer 2

$('#heroburrito .vert h1').attr('data-originalText', function () {
    return (this.textContent || this.innerText).trim();
}).hover(function () {
    $(':first-child:not',this).fadeOut(200, function () {
        $(this).text('←retreat').fadeIn().addClass('home');
    });
},
function () {
    $(':first-child:not',this).fadeOut(200, function () {
        $(this).text($(this).attr('data-originalText')).fadeIn().removeClass('home');
    });
});

这将使a元素保持不变。

JSFIDDLE

Answer 3

我编辑了JSFiddle来修复你正在改变h1的innerText而不是a标签的innerText的问题。

http://jsfiddle.net/n4HCQ/14/

你应该这样做

$(this).find("a").text('←retreat');
$(this).fadeIn().addClass('home');

而不是

$(this).text('←retreat').fadeIn().addClass('home').idle(200);

jQuery淡入/淡出替换文本删除链接

3 个答案: