jqueryfadeIn() 的结尾有一个 'bump'在 Chrome 中 [英] end of jquery fadeIn() has a 'bump' in Chrome

问题描述

我在 Chrome 中使用了一个非常简单的淡入和淡出.我只希望一个文本元素淡出，另一个淡入.工作示例:http://jsfiddle.net/忘记颜色/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

我在 OSX 上的 Chrome 版本号是 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"

这篇关于jqueryfadeIn() 的结尾有一个 'bump'在 Chrome 中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！