jQuery animate() change text
Question
I'm just now giving my first steps on jQuery animate(). I'm trying to make a presentation type thing just to practice, but I can't seem to be able to change the text of my div in the middle of the animation using the animate() function.
Here's my current code:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
div.animate({fontSize:'1em'},2000);
div.animate({opacity:'0'},"slow");
//can I change the text with animation???
div.animate({opacity:'1'},"slow");
div.animate({left:'0px'},"slow");
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<div id='text' style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
</html>
Is there a practical way I can change the text while the opacity is turned off, so when the animation returns the text is changed?
3 answers
solution1
2 ACCPTED 2014-11-14 22:25:52
You can use the queue function to queue up the change.
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
div.animate({fontSize:'1em'},2000);
div.animate({opacity:'0'},"slow");
div.queue(function() {
div.html('New text');
div.dequeue(); // This is necessary to continue the animation
});
div.animate({opacity:'1'},"slow");
div.animate({left:'0px'},"slow");
});
});
solution2
0 2014-11-14 22:09:39
You can define an animation-listener and change your text within the listener:
$('div').animate(
{ opacity: 0 }, // and all the other properties you want to animate
{ duration: 50,
step: function(left){
// change text here after a particular progress
}
});
solution3
0 2014-11-14 22:17:15
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.