patternjavascriptMinor
Animation of multiple text elements in sequence
Viewed 0 times
animationelementstextsequencemultiple
Problem
I feel like this isn't the most effective nor efficient way of doing things:
whichway/speed are dynamic, but other than that it's all stuff that has to be in sync and queued up.
Is there a more efficient way of doing this?
line.stop(true, true).show('slide', {direction: whichway}, speed-150, function() {
title.stop(true, true).fadeIn(speed-200, function() {
sub.stop(true, true).show('slide', {direction: whichway}, speed-50, function() {
subtext.stop(true, true).show();
paragraph.stop(true, true).slideDown(speed);
});
});
});whichway/speed are dynamic, but other than that it's all stuff that has to be in sync and queued up.
Is there a more efficient way of doing this?
Solution
For readability, take advantage of jQuery methods that use the jQuery Deferred object to eliminate your deeply nested callback structure.
Example jQuery.when() can turn your code into this.
Here's another example of using $.when: http://jsfiddle.net/Tp569/
Code from demo.
CSS:
HTML:
JS:
For speed, try out animate.css, which is a pure css 3 base animation library.
If that's not enough then read this
Example jQuery.when() can turn your code into this.
$.when({}).then(function(){
return line.stop(true, true).show('slide', {direction: whichway}, speed-150);
}).then(function() {
return title.stop(true, true).fadeIn(speed-200);
}).then(function() {
return sub.stop(true, true).show('slide', {direction: whichway}, speed-50 );
}).then(function() {
subtext.stop(true, true).show();
return paragraph.stop(true, true).slideDown(speed);
});Here's another example of using $.when: http://jsfiddle.net/Tp569/
Code from demo.
CSS:
.box{
width: 10em;
height: 10em;
display:none;
}HTML:
Box 1
Box 2JS:
$.when({}).then(function(){
return $("#box1").css("backgroundColor", "blue" )
.fadeIn( "slow" ).delay(500).animate({
opacity: 0.5,
margin: '50'
}, "slow").delay(1000);
}).then(function() {
return $("#box2").css("backgroundColor", "yellow" ).fadeIn( "fast" );
});For speed, try out animate.css, which is a pure css 3 base animation library.
If that's not enough then read this
Code Snippets
$.when({}).then(function(){
return line.stop(true, true).show('slide', {direction: whichway}, speed-150);
}).then(function() {
return title.stop(true, true).fadeIn(speed-200);
}).then(function() {
return sub.stop(true, true).show('slide', {direction: whichway}, speed-50 );
}).then(function() {
subtext.stop(true, true).show();
return paragraph.stop(true, true).slideDown(speed);
});.box{
width: 10em;
height: 10em;
display:none;
}<div id="box1" class="box">Box 1</div>
<div id="box2" class="box">Box 2</div>$.when({}).then(function(){
return $("#box1").css("backgroundColor", "blue" )
.fadeIn( "slow" ).delay(500).animate({
opacity: 0.5,
margin: '50'
}, "slow").delay(1000);
}).then(function() {
return $("#box2").css("backgroundColor", "yellow" ).fadeIn( "fast" );
});Context
StackExchange Code Review Q#5309, answer score: 2
Revisions (0)
No revisions yet.