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

我正在使用標準的fadeOut/fadeIn來替換文本。但是，我的標題中正在替換其他文本中的文本。喜歡的東西：jQuery fadeOut：淡出文本，但保留周圍的文本位置

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

當我做到這一點，它的偉大工程，除了DOM轉移到刪除以前的文本，然後轉移回放someNewText。有沒有什麼辦法可以在沒有發生的情況下做到這一點？它看起來像這樣給用戶

原：

敏捷的棕色狐狸跳過懶狗。

淡出的開始：

的的棕色狐狸跳過懶狗。

淡入目的：

智能棕色狐狸躍過懶狗。

注意：我要替換的文本始終是相同數量的字母。因此插入someNewText不應該有閃爍的DOM變化，這與以前在$('#flashable').html()中的長度不同。

2013-04-12 Randy

請你設置一個的jsfiddle（HTTP： //jsfiddle.net/）並將其鏈接到我，以便我可以嘗試並嘗試爲您找到解決方案。 – adaam

請注意，具有相同字母數的單詞在最常用的字體中不一定是相同的寬度（儘管它們的平均寬度相似）。 – nnnnnn

可以更換fadeOut到fadeTo因爲fadeOut意味着在動畫的結束，這將導致元件盒模型由所呈現的頁面刪除設置display: none;。然而，fadeTo動畫只有opacity並保持元素的位置和箱尺寸所以下面的內容將保持其原來的位置：

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

例如在jsFiddle

2013-04-12 03:54:49

謝謝@Arie Shaw。這正是我正在尋找的。 – Randy

它採用動畫/阻。對於其他搜索者，我上面所描述的被稱爲「跳躍」效應。

2013-04-12 03:39:48 Randy

你能告訴我你的HTML結構嗎？

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

2013-04-12 03:41:02

，因爲他們隱藏的文本塊當動畫完成，導致其從頁面佈局被刪除，轉移的東西你不能使用和fadeIn()。

取而代之，您可以使用fadeTo()，這會使文本塊保持原樣並更改爲不透明，但是您還需要構建HTML，以便兩個文本塊彼此重疊。

2013-04-12 03:44:41 jfriend00

回答