我正在寻求改进我用 jQuery 编写的脚本，以执行一些将多个动画链接在一起的动画(以某种时间线顺序)。我不想手动链接每个单独的动画，而是想编写一个函数来替换每个动画中的一些标准元素。
诚然，我没有 JavaScript 知识来了解实现此目的的最佳实践；话虽这么说，一些指针/示例会很棒。
这是我得到的:
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....
});
});
});
}
理想情况下，我希望使用 target 和 direction 参数来替换初始选择器(即 12)及其动画方向(即右:“100%”)。由于每个 target 和 direction 都是不同的，我不能只编写一个函数并在其内部调用它，除非我将它嵌套 12 次，这充其量也看起来很初级.
最后，我希望这个函数(或者可能是一个插件？)在应用所有 12 个函数后停止执行。
不幸的是，动画的顺序不是连续的(如示例所示。不过，我确实知道要制作动画的数字的顺序)。
这是我得到的示例:http://codepen.io/anon/full/Dxzpj
如果有人有任何见解，我们将不胜感激。谢谢!
最佳答案
这不是特别漂亮，但是您可以通过使用自定义队列来自定义动画的顺序；请参阅 queue 和 dequeue 功能。
一个简单的示例可能如下所示:
$(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();
});
这将使用附加到 <body> 的单独队列来跟踪整个动画的进度。元素。当动画的每个部分完成时，它会调用 continue_queue()指示下一部分应该运行。
您可以使用这种方法在单独的函数、循环等中逐步构建动画。并且在您将其关闭之前它不会真正开始运行。
你可以在 jsfiddle 上看到这个直播并进行修改。 .
关于JavaScript - 递归函数(插件？)不断变化的参数，直到达到数字(jQuery)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14346669/