jQuery를 사용한 인라인 텍스트 요소의 크로스 페이드

Question

인라인 앵커 요소를 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); 
    }); 
});​ 

당신이이 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의 작업이를 조정해야 할 수도 있습니다.