Question

我试图使用jQuery淡化数组中某些文本的过渡，但我注意到效果并不总是平滑 - 有时阵列中的一个项目会比另一个项目更长，有时淡入淡出会很快发生。似乎它有时会挂起，但页面上几乎没有任何东西可以悬挂它。我做错了吗？

代码在这里：

CSS：

div { color:blue; font-size:6em }
.red { color:red; }

脚本：

var arr = [ "one", "two", "three", "four", "five" ];

(function timer(counter) {
var text = arr[counter];

$('#target').fadeOut(function(){
    if(text === 'one') {
        $('#target').addClass("red");
    }
    else {
        $('#target').removeClass("red");
    }
    $('#target').empty().append(text).fadeIn();
});

delete arr[counter];
arr.push(text);

setTimeout(function() {
    timer(counter + 1);
}, 3000);
})(0);

和HTML：

<div id="target"></div>

的jsfiddle： http://jsfiddle.net/58Jv5/4/

注意：我在Mac上看到FF 12中的问题，safari似乎工作正常。

jQuery淡化效果不顺畅？

0 个答案: