jQuery淡入/退出替换文本删除链接
jQuery淡入/退出替换文本删除链接
提问于 2013-07-18 15:29:41
演示： jsFiddle
但是，当涉及fadeIn部分时，这是正确的工作方式，但是，h1子标记a href标记在hover上被移除--我想保留是标记。
这也会引起麻烦-webkit-文本填充-颜色:透明；-webkit-背景剪辑:文本；所以，如果我要动画的标签，它将导致一个不稳定的动画(铬)。然而，我发现如果我将父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');
});
});回答 3
Stack Overflow用户
回答已采纳
发布于 2013-07-18 15:41:58
好的，您使用的是$(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');
});
});Stack Overflow用户
发布于 2013-07-18 15:42:00
$('#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
Stack Overflow用户
发布于 2013-07-18 15:43:46
我编辑了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);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17727761
复制相关文章
相似问题
腾讯云开发者
