jQuery淡出：淡出文本，但保留周围的文本位置

我正在使用标准淡出/淡出来替换文本。但是这篇文章在我的标题中的其他文本中间被替换了。比如：

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

当我这样做时，它工作得很好，除了DOM移动以删除以前的文本，然后移回放入

someNewText

。在不发生这种情况的情况下，我有没有办法做到这一点？在用户看来是这样的

原来：

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

淡出开始：

棕色的狐狸跳过了懒狗

渐入端：

聪明的棕色狐狸跳过了懒惰的狗

注意：我要替换的文本的字母数始终相同。因此，不应该因为插入与先前在

$（“#flashable'）.html（）中长度不同的
新文本
而导致DOM更改闪烁，我刚刚发现：

它使用动画/不透明度。对于其他搜索者来说，我上面描述的被称为“跳跃”效应。
你能告诉我你的HTML结构吗

你想这么做吗

您不能使用
fadeOut（）
和
fadeIn（）
，因为它们会在动画完成时隐藏文本块，这会导致文本块从页面布局中删除，并发生变化

相反，您可以使用将文本块保留在适当位置并只更改其不透明度的方法，但是您还需要构造HTML，以便两个文本块相互重叠

这里有一个工作演示：
您可以将
淡出
替换为，因为
淡出
意味着设置
显示：无，这将导致元素框模型从渲染页面中移除。但是，
fadeTo
仅为
不透明度设置动画，并保持元素的位置和框大小，以便以下元素将保持其原始位置：

$（'#flashable'）.fadeTo（600，0，函数（）{
延迟（600美元）；
$（this.html（'smart'）；
美元（本）；
});

的示例能否请您设置一个jsfiddle（）并将其链接到我，以便我可以试验并尝试为您找到一个解决方案。请注意，在大多数常用字体中，字母数相同的单词不一定具有相同的宽度（尽管平均宽度相似）。谢谢@Arie Shaw。这正是我要找的。
$('#flashable').fadeTo('slow', 0, function(){
    $(this).delay(500);
    $(this).html("smart");
    $(this).fadeTo('slow', 1);
});