2

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

このデモでわかるように、希望するクロスフェード効果が得られませんが、フェードアウトに続いてフェードインが行われます。

ヒントをいただければ幸いです。

4

1 に答える 1

5

これが私が思いついたものです：

$('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あります。

于 2012-07-08T17:06:04.950 に答える