当您悬停链接时，它才会开始闪烁。怎么能让它不眨眼？我试过添加一个停止传播。
我希望文本改变，但我不希望发生闪烁效果。我只想让它立刻改变。
$('#hello').attr('data-originalText', function() {
return (this.textContent || this.innerText).trim();
}).hover(function() {
$(this).stop().fadeOut(500, function() {
$(this).html('<a style="text-decoration:none; color:#222;" href="mailto:sfssfl.com">sfsfsfs@gmail.com</a>').stop().fadeIn();
});
},
function() {
$(this).stop().fadeOut(800, function() {
$(this).text($(this).attr('data-originalText')).stop().fadeIn();
});
});.footer_5 {
position: relative;
display: flex;
align-items: top;
justify-content: center;
top: 420px;
}
#hello {
font-family: 'KeplerStd-MediumDisp';
font-size: 42px;
letter-spacing: 1px;
color: #222222;
border-bottom: 3px solid #222222;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="footer_5">
<p id="hello"><span class="first">Please say hello.</span>
</p>
</div>
答案 0 :(得分：2)
问题发生是因为jQuery fadeOut函数将元素display设置为none并将opacity更改为0.一旦元素为display 1}}变为none，即使鼠标处于相同位置，我们也不再在元素上盘旋，因此一旦设置并且淡入淡出，鼠标悬停在事件类型中，悬停事件再次开始，它会进入一个循环循环。
避免fadeOut影响display设置的一种方法是在淡出完成后手动将display设置为block。
$('#hello').attr('data-originalText', function() {
return (this.textContent || this.innerText).trim();
}).hover(function() {
$(this).stop().fadeOut(500, function() {
$(this).css('display', 'block'); // added this line
$(this).html('<a style="text-decoration:none; color:#222;" href="mailto:sfssfl.com">sfsfsfs@gmail.com</a>').stop().fadeIn();
});
},
function() {
$(this).stop().fadeOut(800, function() {
$(this).text($(this).attr('data-originalText')).stop().fadeIn();
});
});.footer_5 {
position: relative;
display: flex;
align-items: top;
justify-content: center;
top: 420px;
}
#hello {
font-family: 'KeplerStd-MediumDisp';
font-size: 42px;
letter-spacing: 1px;
color: #222222;
border-bottom: 3px solid #222222;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="footer_5">
<p id="hello"><span class="first">Please say hello.</span>
</p>
</div>
解决此问题的另一种方法是使用animate()函数在悬停/退出而不是opacity，fadeIn函数时单独更改元素的fadeOut 。这样，元素的display设置永远不会受到影响，因此它不会进入循环。
$('#hello').attr('data-originalText', function() {
return (this.textContent || this.innerText).trim();
}).hover(function() {
$(this).stop().animate({
opacity: 0
}, 500, function() {
$(this).html('<a style="text-decoration:none; color:#222;" href="mailto:sfssfl.com">sfsfsfs@gmail.com</a>').stop().animate({
opacity: 1
});
});
},
function() {
$(this).stop().animate({
opacity: 0
}, 800, function() {
$(this).text($(this).attr('data-originalText')).stop().animate({
opacity: 1
});
});
});.footer_5 {
position: relative;
display: flex;
align-items: top;
justify-content: center;
top: 420px;
}
#hello {
font-family: 'KeplerStd-MediumDisp';
font-size: 42px;
letter-spacing: 1px;
color: #222222;
border-bottom: 3px solid #222222;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="footer_5">
<p id="hello"><span class="first">Please say hello.</span>
</p>
</div>
或者，似乎我们甚至使用fadeTo函数（以结尾opacity作为参数）。这似乎也不会影响元素的display属性。
$('#hello').attr('data-originalText', function() {
return (this.textContent || this.innerText).trim();
}).hover(function() {
$(this).stop().fadeTo(500, 0, function() {
$(this).css('display', 'block'); // added this line
$(this).html('<a style="text-decoration:none; color:#222;" href="mailto:sfssfl.com">sfsfsfs@gmail.com</a>').stop().fadeTo(500, 1);
});
},
function() {
$(this).stop().fadeTo(800, 0, function() {
$(this).text($(this).attr('data-originalText')).stop().fadeTo(800, 1);
});
});.footer_5 {
position: relative;
display: flex;
align-items: top;
justify-content: center;
top: 420px;
}
#hello {
font-family: 'KeplerStd-MediumDisp';
font-size: 42px;
letter-spacing: 1px;
color: #222222;
border-bottom: 3px solid #222222;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="footer_5">
<p id="hello"><span class="first">Please say hello.</span>
</p>
</div>
Reference for the approach used in the 3rd snippet was this SO thread。另外两个是通过jQuery docs自我识别的。
答案 1 :(得分：0)
从JQuery中删除$(this).stop().fadeOut(500, function () {将为您提供所需的输出。
$('#hello').attr('data-originalText', function () {
return (this.textContent || this.innerText).trim();
}).hover(function () {
$(this).html('<a style="text-decoration:none; color:#222;" href="mailto:sfssfl.com">sfsfsfs@gmail.com</a>').stop().fadeIn();
},
function () {
$(this).stop().fadeOut(800, function () {
$(this).text($(this).attr('data-originalText')).stop().fadeIn();
});
});
<强> Working Fiddle
答案 2 :(得分：0)
只需尝试此操作即可。只是展示和隐藏。
$('#hello').attr('data-originalText', function () {
return (this.textContent || this.innerText).trim(); })
.hover(
function () {
$(this).hide();
$(this).html('<a style="text-decoration:none; color:#222;" href="mailto:sfssfl.com">sfsfsfs@gmail.com</a>').show();
},
function () {
$(this).hide();
$(this).text($(this).attr('data-originalText')).show()
}
);
答案 3 :(得分：0)
只需删除fadeOut和FadeIn，它将起作用如下：
$('#hello').attr('data-originalText', function () {
return (this.textContent || this.innerText).trim();
}).hover(function () {
$(this).html('<a style="text-decoration:none; color:#222;" href="mailto:sfssfl.com">sfsfsfs@gmail.com</a>');
},
function () {
$(this).text($(this).attr('data-originalText'));
});
答案 4 :(得分：0)
这是我的解决方案（我给了文字红色）：
$('#hello').attr('data-originalText', function () {
return (this.textContent || this.innerText).trim();
}).hover(function () {
$(this).html('<a href="mailto:sfssfl.com"><font color="red">sfsfsfs@gmail.com</font></a>').stop().fadeIn();
$(this).css("border-bottom", "none");
},
function () {
$(this).stop().fadeOut(800, function () {
$(this).text($(this).attr('data-originalText')).stop().fadeIn();
});
});