使用jQuery對內聯文本元素進行交叉淡入淡出

Question

我正在尋找一種方法來正確使用jQuery設置/ crossfade內聯定位元素。對於塊元素有幾種解決方案，但是對於內聯元素來說目前還沒有解決方案。

我每個單詞替代文本來自元素中的一個屬性：

<a data-r="nerd">word</a>​ 

但是，如果我試圖淡出，替換文本和淡入，喜歡這裏：

jQuery(document).ready(function($) { 
$('a').click(function(index) { 
    $(this).fadeOut(500, function() { 
     $(this).text($(this).attr("data-r")); 
    }); 
    $(this).fadeIn(500); 
    }); 
});​ 

我沒有得到我想要的淡入淡出效果，而是淡入淡出，如您在此demo中看到的那樣。

我會非常感謝您可能有的任何提示。

Answer 1

這就是我想出了：

$('a').click(function(index) { 
 
    var clone = $(this).clone(); 
 
    clone.css('position', 'absolute'); 
 
    clone.css('left', $(this).position().left); 
 
    clone.css('top', $(this).position().top); 
 
    $('body').append(clone); 
 

 
    $(this).hide(); 
 
    $(this).text($(this).attr("data-r")); 
 

 
    clone.fadeOut(500, function() { 
 
    clone.remove(); 
 
    }); 
 
    $(this).fadeIn(500); 
 
});

a { font-size: 60px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<p> 
 
    <a data-r="nerd">word</a><br> 
 
    <a data-r="dork">word</a> 
 
</p>

您可能需要調整這種不同line-height s到工作，雖然。