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

Question

我正在使用标准淡出/淡入来替换文本。但是这个文本被替换在我标题中其他文本的中间。就像是：

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

当我这样做时，它工作得很好，除了 DOM 移动以删除以前的文本，然后移动回 put in someNewText。有什么方法可以在没有发生的情况下做到这一点？用户看起来像这样

起初：

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

淡出开始：

棕色的狐狸跳过了懒惰的狗。

淡入淡出：

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

注意：我要替换的文本始终是相同数量的字母。因此，由于插入someNewText的长度与之前在$('#flashable').html().

score 6 · Accepted Answer

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

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

jsFiddle上的示例

score 2 · Accepted Answer

你能告诉我你的HTML结构吗？

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

score 0 · Accepted Answer

它使用动画/不透明度。对于其他搜索者，我上面描述的称为“跳跃”影响。

score 0 · Accepted Answer

您不能使用fadeOut()并且fadeIn()因为它们会在动画完成时隐藏文本块，这会导致它从页面布局中移除并且事情会发生变化。

相反，您可以使用fadeTo()which 将文本块留在原处并仅更改其不透明度，但是您还需要构建 HTML 以使两个文本块彼此重叠。

这是一个工作演示：http: //jsfiddle.net/jfriend00/ahbyh/

4 回答 4