使用jQuery淡入淡出嵌入式文本元素 [英] Cross-fade for inline text elements with jQuery

问题描述

我正在寻找一种使用jQuery适当地动画化/淡化内联锚点元素的方法.对于块元素，有几种解决方案，但是对于内联元素，到目前为止没有任何解决方案.

I am looking for a way to properly animate/crossfade inline anchor elements with jQuery. There are several solutions out there for block elements, but nothing so far for inline-elements.

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

My alternative text for each individual word comes from an attribute within the element:

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

但是，如果我尝试淡出，请替换文本并淡入，如此处所示:

But if I try to fadeout, replace the text and fade in, like here:

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

我没有得到想要的淡入淡出效果，而是淡入淡出，然后再进行淡入淡出，正如您在演示.

I am not getting the cross-fade effect that I would like, but a fadeout followed by a fadein, as you can see in this demo.

非常感谢您提供的任何提示.

I'd be very grateful for any tips you might have.

推荐答案

这是我想出的:

$('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一起使用.

You may have to adjust this to work with different line-heights, though.

这篇关于使用jQuery淡入淡出嵌入式文本元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！