All geek questions in one place

Changing text with jquery cannot go right

I am working on a text effect, but the transition is not quite to my liking.

I replace one word in a line with centered text, I make the old word disappear, and the new one disappears, but the surrounding text “jumps”. I tried for some time to figure out how to make him slide a new place towards him somehow, using animation by margins or width, but I can't figure it out.

Here is the JSfiddle of what I have right now http://jsfiddle.net/DEk7m/3/

What I'm trying to achieve is similar to what is visible in the big header here: https://gumroad.com/

And here is the code:

HTML:

<h1 id="changingtext">This is <span>changing</span> text</h1>

CSS

 h1 { text-align: center; font-family: helvetica, arial, sans-serif; }

JavaScript (using jQuery):

 $(function() { var t1 = new Array("changing", "dynamic", "cool"); var i = 0; var tid = setInterval( function() { $("#changingtext span").animate({'opacity': 0}, 1000, function () { $(this).text(t1[i]); }).animate({'opacity': 1}, 1000); if(i < t1.length -1) i++; else i = 0; }, 3000 ); });

thank you very much!

+6
source share
4 answers

Your demo is missing width, look at that,

HTML

 <body> <h1><span id="chkWidth" style="display: none;"></span></h1> <h1 id="changingtext">This is <span>changing</span> text</h1> </body>

Script

 $(function() { var t1 = new Array("changing", "dynamic", "cool"); var i = 0; var width; var tid = setInterval( function() { $("#changingtext span").animate({'opacity': 0}, 1000, function () { $(this).text(t1[i]); width = $('#chkWidth').text(t1[i]).width(); $(this).animate({'opacity': 1, 'width': width}, 1000); }); if(i < t1.length -1) i++; else i = 0; }, 3000 ); });

http://jsfiddle.net/DEk7m/8/

Hope this helps you.

+5
source

SEE ANOTHER ANSWER COVERING A SINGLE QUESTION

BON! No need for setInterval when you are dealing with .animate()
Even better approach without first break / jump change and with dynamically calculated span width:

Live demo

CSS

 h1 span{ /* To prevent a jumpy misaligned SPAN due to widths change. */ vertical-align:top; }

JQ:

 $(function() { var t=["changing", "dynamic", "cool"], $h1 = $("#changingtext"), $sp = $h1.find("span"), i=0, widths=[]; $.each(t, function(i, v){ var el = $('<span />', {text:v}).appendTo($h1); widths.push(el.width()); el.remove(); }); $sp.css({opacity:0}); (function loop(){ i = ++i%t.length; $sp.text(t[i]).animate({width:widths[i]}, 1000, function(){ $(this).animate({opacity:1},1000).delay(3000).animate({opacity: 0}, 1000, loop); }); })(); });

This code group

  $.each(t, function(i, v){ var el = $('<span />', {text:v}).appendTo($h1); widths.push(el.width()); el.remove(); });

stores in our array widths[] all the necessary widths that we need.
We will consider iterations of widths[] just as you already did for t[]

than we create a recursive self-invoking function (no need for setInterval !), where we check for i to become 0 with a simple Modulo Operator (Reminder) %

 i = ++i%t.length;

The looping function is simply achieved by referring to this function inside the last chain callback.

+3
source

Opacity and Width Animation

You can customize an array of objects to include the ideal width for each subsequent instance.

 var t1 = [ ['changing', '130px'], ['dynamic', '80px'], ['cool','150px'] ], i = 0; var tid = setInterval( function() { $("#changingtext span") .animate({ 'opacity': 0, 'width': t1[i][1] }, 500, function() { $(this).text( t1[i][0] ); }) .animate({'opacity': 1}, 1000); if(i < t1.length -1) i++; else i = 0; }, 3000 );

Demo on JSFiddle .

This is a bit static and cumbersome way, but it should turn you off in the right direction.

Perhaps you could figure out the size of the spans dynamically by printing the words as a span list, measuring their width and adding their width to the array.

+1
source

Ok, here is a working example that I quickly did for you: fiddle

As you can see, I use another hidden element and contains the following line to calculate the correct width - all you need now is just

  Fading out >>> Animating the width >>> Text >>> Fade in.

The text does not jump during fading because the outer words move left / right.

Good luck ...

Jquery:

 var words1 = new Array( "dynamic", "changing", "cool"); var i1 = 0; $("#next1").text($("#outer1").text()).hide(); $("#outer1").width($("#next1").width()); var tid1 = setInterval( function() { var word_in1; if (typeof words1[i1+1] !='undefined') { word_in1 = words1[i1+1] } else { word_in1 = words1[0]; } var by_char_next1 = $("#next1").text('This is '+ word_in1 + ' text').width(); $("#changingtext1").fadeOut(1000, function(){ $("#outer1").animate({'width': by_char_next1 },1000,function(){ $("#changingtext1").text(words1[i1]).fadeIn(1000); }); }); if (i1 < words1.length-1) i1++; else i1 = 0; }, 3000 );

CSS

  #outer1, #changingtext1 { padding:0; margin:0; font-size: 40px; font-weight: bold; font-family: helvetica, arial, sans-serif; } #next1{ padding:0; margin:0; font-size: 40px; font-weight: bold; font-family: helvetica, arial, sans-serif; }

HTML:

 <center> <div id='outer1' align='center'> <span style='float:left;'>This is</span> <span id="changingtext1">changing</span> <span style='float:right;'>text</span> </div> <br /> <span id='next1'></span> </center>
0
source

Source: https://habr.com/ru/post/944313/

More articles:


All Articles