1

デモ: jsFiddle

これは、フェードイン/アウト部分に関しては正常に機能しますがh1、タグである子hrefは削除されます-タグを保持しhoverたいです。

これは -webkit-text-fill-color: transparent; でも問題を引き起こします。-webkit-background-clip: テキスト; そのため、タグをアニメーション化すると、アニメーションがびくびくします (クロム)。ただし、親を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

0

JSFiddle を編集して、a タグの innerText ではなく、h1 の 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 に答える