I am trying to animate the html part of a tag ( <font id="test" size="7">This Text!</font>
) using jQuery's Animate function, like so:
$("#test").delay(1500).animate({text:'The text has now changed!'},500);
However nothing happens, it does not change the text.
How can I do this? Thanks!
This question is related to
jquery
html
text
jquery-animate
Following the suggestion by JiminP....
I made a jsFiddle that will "smoothly" transition between two spans in case anyone is interested in seeing this in action. You have two main options:
The first time you click the button, number 1 above will occur. The second time you click the button, number 2 will occur. (I did this so you can visually compare the two effects.)
Try it Out: http://jsfiddle.net/jWcLz/594/
Details:
Number 1 above (the more difficult effect) is accomplished by positioning the spans directly on top of each other via CSS with absolute positioning. Also, the jQuery animates are not chained together, so that they can execute at the same time.
HTML
<div class="onTopOfEachOther">
<span id='a'>Hello</span>
<span id='b' style="display: none;">Goodbye</span>
</div>
<br />
<br />
<input type="button" id="btnTest" value="Run Test" />
CSS
.onTopOfEachOther {
position: relative;
}
.onTopOfEachOther span {
position: absolute;
top: 0px;
left: 0px;
}
JavaScript
$('#btnTest').click(function() {
fadeSwitchElements('a', 'b');
});
function fadeSwitchElements(id1, id2)
{
var element1 = $('#' + id1);
var element2 = $('#' + id2);
if(element1.is(':visible'))
{
element1.fadeToggle(500);
element2.fadeToggle(500);
}
else
{
element2.fadeToggle(500, function() {
element1.fadeToggle(500);
});
}
}
For fadeOut => change text => fadeIn effect We need to animate the wrapper of texts we would like change.
Example below:
<div class="timeline-yeardata">
<div class="anime">
<div class="ilosc-sklepow-sticker">
<span id="amount">1400</span><br>
sklepĆ³w
</div>
<div class="txts-wrap">
<h3 class="title">Some text</h3>
<span class="desc">Lorem ipsum description</span>
</div>
<div class="year-bg" id="current-year">2018</div>
</div>
</div>
<div class="ch-timeline-wrap">
<div class="ch-timeline">
<div class="line"></div>
<div class="row no-gutters">
<div class="col">
<a href="#2009" data-amount="9" data-y="2009" class="el current">
<span class="yr">2009</span>
<span class="dot"></span>
<span class="title">Lorem asdf asdf asdf a</span>
<span class="desc">Ww wae awer awe rawer aser as</span>
</a>
</div>
<div class="col">
<a href="#2010" data-amount="19" data-y="2010" class="el">
<span class="yr">2010</span>
<span class="dot"></span>
<span class="title">Lorem brernern</span>
<span class="desc">A sd asdkj aksjdkajskd jaksjd kajskd jaksjd akjsdk jaskjd akjsdkajskdj akjsd k</span>
</a>
</div>
</div>
</div>
</div>
$(document).ready(function(){
$('.ch-timeline .el').on('click', function(){
$('.ch-timeline .el').removeClass('current');
$(this).addClass('current');
var ilosc = $(this).data('ilosc');
var y = $(this).data('y');
var title = $(this).find('.title').html();
var desc = $(this).find('desc').html();
$('.timeline-yeardata .anime').fadeOut(400, function(){
$('#ilosc-sklepow').html(ilosc);
$('#current-year').html(y);
$('.timeline-yeardata .title').html(title);
$('.timeline-yeardata .desc').html(desc);
$(this).fadeIn(300);
})
});
});
Hope this will help someone.
See Davion's anwser in this post: https://stackoverflow.com/a/26429849/1804068
HTML:
<div class="parent">
<span id="mySpan">Something in English</span>
</div>
JQUERY
$('#mySpan').animate({'opacity': 0}, 400, function(){
$(this).html('Something in Spanish').animate({'opacity': 1}, 400);
});
refer to official jquery example: and play with it.
.animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
If all you're looking to do is change the text you could do exactly as Kevin has said. But if you're trying to run an animation as well as change the text you could accomplish this by first changing the text then running your animation.
For Example:
$("#test").html('The text has now changed!');
$("#test").animate({left: '100px', top: '100px'},500);
Check out this fiddle for full example:
$("#test").hide(100, function() {
$(this).html("......").show(100);
});
Updated:
Another easy way:
$("#test").fadeOut(400, function() {
$(this).html("......").fadeIn(400);
});
Source: Stackoverflow.com