Question

我使用标准的fadeOut / fadeIn来替换文本。但是这篇文章正在我的标题中的其他文本中间被替换。类似的东西：

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

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

最初：

快速的棕色狐狸跳过懒狗。

淡出开始：

棕色的狐狸跳过懒狗。

淡入淡出：

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

注意：我替换的文字总是相同的字母数。因此，由于someNewText插入的长度不同于$('#flashable').html()之前的长度，因此不应出现DOM更改的闪烁。

Answer 1

您可以将fadeOut替换为fadeTo，因为fadeOut意味着在动画结束时设置display: none;，这将导致从呈现的页面中删除元素框模型。但是，fadeTo仅为opacity设置动画并保留元素的位置和大小，以便以下元素保持其原始位置：

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

上的示例

Answer 2

你可以告诉我你的HTML结构吗？

好吧，你想做到这一点吗？ http://jsfiddle.net/ericdum/AkJ9J/

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

Answer 3

使用animate / opacity。对于其他搜索者，我上面描述的被称为“跳跃”影响。

Answer 4

您无法使用fadeOut()和fadeIn()，因为它们会在动画完成时隐藏文本块，从而导致它从页面布局中移除并移动。

相反，您可以使用fadeTo()保留文本块，只是更改它的不透明度，但是您还需要构建HTML，以便两个文本块在另一个上面