问题描述
我在Chrome中使用了非常简单的fadeIn和fadeOut.我只希望一个文本元素淡出而另一个文本淡入.工作示例: http://jsfiddle.net/luckycolor/7eR5Q/
I'm using a very simple fadeIn and fadeOut in Chrome. I just want one text element to fade out and another to fade in. Working example: http://jsfiddle.net/forgetcolor/7eR5Q/
我遇到的问题是,在fadeIn()的末尾有一个突然过渡到结束状态的问题.我称其为凹凸".元素逐渐淡入,但到最后,它失去了平滑度并立即完成了淡入淡出.
The problem I'm having is that at the end of the fadeIn() there is an abrupt transition to the end state. I call it a 'bump'. The element fadesIn smoothly, but right at the end it loses that smoothness and finishes the fade all at once.
有办法避免这种情况吗?
Is there a way to avoid this?
var cur = 1;
$('#btn').click(function() {
if (cur == 1) {
$('#txt1').fadeOut(500, function() {
$('#txt2').fadeIn(500);
});
cur = 2;
} else if (cur == 2) {
$('#txt2').fadeOut(500, function() {
$('#txt1').fadeIn(500);
});
cur = 1;
}
});
body {
background-color:#666;
color:white;
font-size:20px;
margin:20px;
}
#txt2 {display:none;}
<div id="txt1">txt1</div>
<div id="txt2">txt2</div>
<br/><div id="btn">btn</div>
更新:
这是一个视频: http://www.youtube.com/watch?v=n2IGED0pkVg
我的Chrome在OSX上的版本号是20.0.1132.21 beta(当前最新)
My Chrome version number is 20.0.1132.21 beta (latest right now) on OSX
提交的Chrome错误报告: https://code.google.com/p/chromium/issues/detail?id = 130801
Chrome bug report submitted: https://code.google.com/p/chromium/issues/detail?id=130801
推荐答案
如果我继续关闭Webkit字体平滑功能,则溶解效果很好: http://jsfiddle.net/7eR5Q/19/因此,显然,它消除了过渡过程中的平滑,并在引起凸起"之后添加了它.
If I go ahead and turn off the webkit font smoothing, the dissolve works great:http://jsfiddle.net/7eR5Q/19/So apparantly it removes the smoothing during the transition and adds it after causing the "bump"
这篇关于jQuery fadeIn()的结尾在Chrome中出现“颠簸"的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!