JavaScript - recursive function (plugin?) with changing arguments until number is reached (jQuery)
Question
I'm looking to improve a script I've written in jQuery to do some animation that chains multiple animations together (in somewhat of a timeline sequence). Instead of manually chaining each individual animation, I'd like to write a function to replace a few elements that are standard in each animation.
Admittedly, I don't have the JavaScript knowledge to know the best practices to accomplish this; that being said, some pointers/examples would be fantastic.
Here's what I've got:
function itemsFirstAnim() {
// Define each target div
var one = $(".one");
var two = $(".two");
var three = $(".three");
var four = $(".four");
var five = $(".five");
var six = $(".six");
var seven = $(".seven");
var eight = $(".eight");
var nine = $(".nine");
var ten = $(".ten");
var eleven = $(".eleven");
var twelve = $(".twelve");
// Show a block (opacity 1), give the overlay a position, show and animate it
twelve.css("opacity", 1).children(".overlay").show().animate({ right: "100%" }, 750, function() {
// cover the block with the overlay when the animation is done
twelve.children('.overlay').css({ right: 0 });
eleven.css("opacity", 1).children(".overlay").show().animate({ bottom: "100%" }, 750, function() {
eleven.children('.overlay').css({ bottom: 0 });
seven.css("opacity", 1).children(".overlay").show().animate({ right: "100%" }, 750, function() {
seven.children(".overlay").css({ right: 0 });
and so on....
});
});
});
}
Ideally, I'd like to have arguments of target and direction to replace the initial selector (ie twelve ) and it's animation direction (ie right: "100%" ). Since each target and direction is different, I can't just write a function and call it inside of itself, unless I nested it 12 times, which also seems rudimentary at best.
Finally, I'd like this function (or maybe a plugin?) to stop executing when all 12 of these have been applied.
Unfortunately, the order of the animation is not sequential (as show in the example. I do know the order of the numbers to animate, however).
Here's an example of what I've got: http://codepen.io/anon/full/Dxzpj
If anyone has any insight, it would be much appreciated. Thanks!
2 answers
solution1
0 ACCPTED 2013-01-15 21:11:55
This is not particularly beautiful, but you can customize the order of animations however you want by using custom queues; see the queue and dequeue functions.
A simple example might look like:
$(function () {
// Use the body to track the animation queue; you can use whatever
// element you want, though, since we're using a custom queue name
var $body = $(document.body);
// Helper functions to cut down on the noise
var continue_queue = function () {
$body.dequeue("my-fx");
};
var add_to_queue = function (cb) {
$body.queue("my-fx", cb);
};
// Define your queue. Be sure to use continue_queue as the callback
add_to_queue(function () {
$('#one').animate({ height: '8em' }, 750, continue_queue);
});
add_to_queue(function () {
$('#two').animate({ width: '8em' }, 750, continue_queue);
});
// Need to call this once to start the sequence
continue_queue();
});
This will track the progress of your overall animation using a separate queue attached to the <body> element. When each part of the animation finishes, it calls continue_queue() to indicate that the next part should run.
You can use this approach to build your animation piecemeal—in separate functions, a loop, etc. And it won't actually start running until you fire it off.
You can see this live and mess with it on jsfiddle .
solution2
0 2013-01-15 21:13:36
If you're applying the same settings to all of your elements, a simple recursion could help a lot.
var $els = $('#one, #two, #three'); // collect all your elements in an array
(function recursive(el) {
el.animate({height: '100px'}, 800, function() {
if (el.next()) recursive(el.next()); // if there are more, run the function again
});
})($els.eq(0)); //start with the first one
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.