1

演示： jsFiddle

当涉及到淡入/淡出部分时，这可以正常工作，但是h1作为 a 标签的孩子href会被删除hover- 我想保留a标签。

这也会导致 -webkit-text-fill-color: transparent; 出现问题。-webkit-background-clip：文本；所以如果我要为 a 标签设置动画，它会导致一个跳跃的动画（chrome）。但是我发现如果我将父级设置为 h1 动画运行顺利

应该是这样的结构：

<div id="heroburrito">
    <div class="vert">
         <h1>
            <a class="homehover" href="#"></a>  <!--This parts gets removed on hover - it shouldn't-->
        </h1>
    </div>
</div>

js

$('#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');
    });
});
4

3 回答 3

3

好吧，您正在使用$(this).text(...)- 这将替换所引用元素的全部内容this- 这是您的h1元素。相反，您应该将代码附加到您的a元素中h1：

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

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

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

从而用纯文本替换您的整个链接。这是我更新的小提琴，可以正常工作。

编辑：如果您需要运行淡入/淡出h1而不是链接本身，那么您需要将文本更改应用于链接 - 这是一个更新的小提琴：

$('#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');
    });
});
于 2013-07-18T15:41:58.527 回答
0 
$('#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

于 2013-07-18T15:42:00.227 回答
0

我编辑了 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);
于 2013-07-18T15:43:46.897 回答