I am looking for a way to properly animate/crossfade the change of text, but I can't have the text in different elements, one of which is hidden (which is the kind of examples you can find online).
My text comes from an attribute within the element:
<a data-r="nerd">word</a>
and if i do this:
jQuery(document).ready(function($) {
$('a').click(function(index) {
$(this).fadeOut(500, function() {
$(this).text($(this).attr("data-r"));
});
$(this).fadeIn(500);
});
});
the text first fades out, then fades in. Is there a way to make the transition seamless?