jQuery的褪色刪除鏈接

這正常工作，因爲它應該當它涉及到的淡入/出部分然而h1孩子作爲一個href標籤大幹快上hover刪除 - 我想保留一個標記。

這也會導致-webkit-text-fill-color：transparent; -webkit-background-clip：text;所以如果我會爲一個標籤設置動畫效果，會導致一個跳動的動畫（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>

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

來源

2013-07-18 Sebastian Graz

這是實現CSS的一種奇怪的方式。如果你設置了class或id，然後將css放入css框中，它會更快更容易查看。 – 2013-07-18 15:36:11

@OliverCole對不起，這是直接從我正在做的WP主題開始的。我在哪裏使用PHP控制CSS - 檢查這個鏈接http://sebastiangraz.com/projects/portfolio/?portfolio=konsthallen –

這不是奇怪的方式@Oliver，它是其中一種方式（內聯樣式）。唯一的好處是它們具有最高優先級，這些樣式無論如何都會被應用。 – Learner

好，您正在使用$(this).text(...) - 這將替換this中提到的元素的全部內容 - 這是您的h1元素。相反，你應該將代碼安裝到您的a元素h1內：

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

這是你的問題是正確的，但你的小提琴只包含

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

因此與純文本替換整個鏈接。這是我的updated fiddle工作正常。

編輯：如果您需要在h1，而不是鏈接本身運行/出褪色，那麼你需要的文字更改應用於鏈接 - 這裏是一個updated fiddle：

$('#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-18 15:41:58

是的，我知道這一點。對不起，我可能應該在後期提到這一點 - 但這會導致-webkit-text-fill-color：transparent; -webkit-background-clip：text;正如你可以在你的小提琴中看到的那樣，淡入/淡出的文字在Chrome中非常刺激。但是，如果你動畫的h1，而不是錨標記它淡出/平穩 –

@SebastianGraz我更新了我的答案。 –

這正是我想要的。謝謝！ –

$('#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-18 15:42:00 DevlshOne

Uncaught TypeError：無法調用未定義jquery.js的方法'replace'？ver = 1.8.3：2我得到那個錯誤 –

我編輯的jsfiddle來解決你在哪裏改變了H1的的innerText的問題，而不是一個標籤的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-18 15:43:46 DSurguy

jQuery的褪色刪除鏈接

回答

相關問題