jquery - 使用 jQuery 实现内联文本元素的交叉淡入淡出

Question

我正在寻找一种使用 jQuery 正确设置动画/交叉淡入淡出内联 anchor 元素的方法。对于 block 元素有几种解决方案，但到目前为止还没有针对内联元素的解决方案。

每个单词的替代文本来自元素内的一个属性:

<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。