![](/img/trans.png)
[英]Increase and decrease a variable until a number is reached in Javascript
[英]JavaScript - recursive function (plugin?) with changing arguments until number is reached (jQuery)
我正在寻求改进我在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
参数来替换初始选择器(即twelve
),它是动画方向(即right: "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()
以指示下一个部分应运行。
您可以使用这种方法在单独的函数,循环等中逐一构建动画,直到将其触发后它才真正开始运行。
如果您对所有元素都应用相同的设置,那么简单的递归会很有帮助。
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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.