使用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到工作，虽然。