交叉淡入淡出与jQuery的内联文本元素(Cross-fade for inline text el

我在寻找一种方式，以正确的动画效果与jQuery /淡入淡出直列锚元素。 有几种解决方案，在那里为块级元素，但没有到目前为止，内联元素。

我的每一个单词替代文本来自元素中的一个属性：

<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);
    });
});​

我没有得到的淡入淡出效果，我想，但随后是淡入淡出一个，你可以在此看到演示 。

我会为你可能有任何建议非常感谢。

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，虽然。

文章来源: Cross-fade for inline text elements with jQuery