我想在jquery 1.3中设置一系列项目的动画,每个下一个项目从第一个动画的中途开始。换句话说,我想要一个半队列效应。我试图使用下面的代码,但它无法正常工作。有没有人有任何想法?
$("h3").click(function(){
$(".projectItem").each(function (i) {
if (i > 0){
setTimeout ("", 500);
}
$(this).animate({"opacity": 0, "duration": 1000});
});
});
PS:我试图使用各种“空闲”或“暂停”jquery插件,但我怀疑使用的技术是pre jquery 1.3?
PPS:提前感谢您的帮助:)
答案 0 :(得分:16)
您可以尝试这样的事情:
$("h3").click(function(){
$(".projectItem").each(function (i) {
// store the item around for use in the 'timeout' function
var $item = $(this);
// execute this function sometime later:
setTimeout(function() {
$item.animate({"opacity": 0}, 1000);
}, 500*i);
// each element should animate half a second after the last one.
});
});
这里的一般想法是使用您的.projectItem
列表 - 您将动画从开始延迟到每个项目500毫秒。第一项(i=0
)将具有0ms延迟并在下一个事件循环期间立即执行(几乎)。每个项目之前的每个项目将延迟500毫秒,并且由于您的动画持续1000毫秒,它将在最后一个项目动画的大约一半处开始。
答案 1 :(得分:1)
我认为将动画分为2部分(从不透明度1到0.5,从0.5到0)更简单,并使用常规队列(如果可以中断)。
如果我们从不透明度1开始这个代码:
$("h3").click(function(){
$(".projectItem").each(function (i) {
$(this).animate({"opacity": 0.5, "duration": 500}, function(){
//... put here something in the half way ...
$(this).animate({"opacity": 0, "duration": 500});
});
});
});