Search jQuery

jQuery Forum

Proper crossfade for text coming from a change in $(this).text()?

in Using jQuery UI • 8 years ago

Hi guys.

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?

I set up this example on http://jsfiddle.net

Any tips would be appreciated.

all best,

tench

Replies(7)

psychoque..

Re: Proper crossfade for text coming from a change in $(this).text()?

8 years ago

hi guy. i am still struggling with this problem. does anybody know how to create seamless crossfade effect for individual words taking into consideration the conditions described above?

jakecigar

Re: Proper crossfade for text coming from a change in $(this).text()?

8 years ago

Crossfading requires that both words exist in the DOM at the same time, at the same location, same width, same height. One is hidden and the other is shown. Use fadeToggle to do the switcheroo.

From your example it looks like you might want the word to be inside a paragraph (because a is inline). That would be a pain to accomplish.

JΛ̊KE

jakecigar

Re: Re: Proper crossfade for text coming from a change in $(this).text()?

8 years ago

http://jsfiddle.net/rYK3v/11/ does the cross fade, but relies on absolute positioning.

JΛ̊KE

jakecigar

Re: Proper crossfade for text coming from a change in $(this).text()?

8 years ago

I decided to pound this one until it did what I wanted. I came up with a pretty good solution.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$('[data-r]').each(function() {
var outer=$(this).wrap( $('<span/>').css({position:'relative'}) )
.click(function(){
$(this).children('.toggle').toggleClass('visible').each(function(){
if ($(this).hasClass('visible'))
$(this).animate({opacity:1})
else
$(this).animate({opacity:0})
})
}).wrapInner( $('<span class="space"/>').css({opacity:0}) )
var word=$('<span class="toggle visible"/>')
.appendTo(outer)
.text($(this).text())
.css({
opacity:1,
position:'absolute',
left:0
})
var r=$('<span class="toggle"/>')
.appendTo(outer)
.text($(this).data('r'))
.css({
opacity:0,
position:'absolute',
left:0
})
if(word.width()<r.width())
outer.find('.space').text(r.text()) // allocate space for the larger word.
})
})
</script>
<style type="text/css">
a{
font-size: 60px;
}
</style>
<title>crossFade</title>
</head>
<body>
<ol>
<li>
Who makes the pages? <a data-r="nerd">word</a>
</li>
<li>
What does it take to make a cool page? <a data-r="brain">word</a>
</li>
<li>
What is a really big word? <a data-r="cornucopia">word</a>
</li>
</ol>
</body>
</html>

JΛ̊KE

dmtrrrr

Re: Re: Proper crossfade for text coming from a change in $(this).text()?

1 year ago

Hello!

I have just found your answer here today, tested it to see how it works and absolutely FELL in love with it!!! :) - how it crossfades one word into another, without relying on absolute/relative position and without fadeOut/fadeIn.

I have 2 indepedent image cyclers (with very different codes, one works "on click" and the other one works automatically) that utilize fadeOut/fadeIn and I would be incredibly grateful if you could help me adapt your absolutely brilliant code for my 2 cyclers.

http://jsfiddle.net/couwga0s/ - on click cycler

http://jsfiddle.net/ru8tz96c/2/ - automatic cycler

Great job!

jakecigar