jQuery fadeOut:淡出文本,但保持周围的文本放置

Question

我使用标准的fadeOut/fadeIn来替换文本.但是这篇文章正在我的标题中的其他文本中间被替换.就像是:

$('#flashable').fadeOut('slow', function(){
    $(this).delay(500);
    $(this).html(someNewText);
    $(this).fadeIn('slow);
});

当我这样做时,它工作得很好,除了DOM移动以删除先前的文本然后转回来放入someNewText.在没有发生这种情况的情况下,有什么办法可以做到这一点吗？它对用户来说就像这样

本来:

敏捷的棕色狐狸跳过了懒狗.

淡出开始:

棕色的狐狸跳过懒狗.

淡入淡出:

聪明的棕色狐狸跳过懒狗.

注意:我替换的文本总是相同的字母数.所以不应该因为插入而导致DOM更改闪烁,someNewText这与之前的长度不同$('#flashable').html().

Answer 1

您可以替换fadeOut为fadeTo因为fadeOut暗示display: none;在动画结束时设置,这将导致从渲染页面中删除元素框模型.但是,仅设置fadeTo动画opacity并保持元素的位置和框大小,以便以下元素保持其原始位置:

$('#flashable').fadeTo(600, 0, function () {
    $(this).delay(600);
    $(this).html('smart');
    $(this).fadeTo(600, 1);
});

关于jsFiddle的示例