jquery动画头痛
做一些jquery动画。我将某些div设置为属性为ani_seq='x',其中x是1到9,然后将类指定为'animate。我使用的代码如下,工作正常,并按顺序在每个项目中淡出:jquery动画头痛,jquery,queue,effects,Jquery,Queue,Effects,做一些jquery动画。我将某些div设置为属性为ani_seq='x',其中x是1到9,然后将类指定为'animate。我使用的代码如下,工作正常,并按顺序在每个项目中淡出: function my_animate( in_wrapper_id ) { $j("#" + in_wrapper_id + " .animate").hide(); // hide all items to be animated // animate all seq1 it
function my_animate( in_wrapper_id ) {
$j("#" + in_wrapper_id + " .animate").hide(); // hide all items to be animated
// animate all seq1 items --
$j("#" + in_wrapper_id + " [ani_seq='1']").fadeIn( 1000,
function() { $j("#" + in_wrapper_id + " [ani_seq='2']").fadeIn( 1000,
function() { $j("#" + in_wrapper_id + " [ani_seq='3']").fadeIn( 1000,
function() { $j("#" + in_wrapper_id + " [ani_seq='4']").fadeIn( 1000,
function() { $j("#" + in_wrapper_id + " [ani_seq='5']").fadeIn( 1000,
function() { $j("#" + in_wrapper_id + " [ani_seq='6']").fadeIn( 1000,
function() { $j("#" + in_wrapper_id + " [ani_seq='7']").fadeIn( 1000,
function() { $j("#" + in_wrapper_id + " [ani_seq='8']").fadeIn( 1000,
function() { $j("#" + in_wrapper_id + " [ani_seq='9']").fadeIn( 1000 ); });
});
});
});
});
});
});
});
}
我遇到的问题是,有些物品不只是淡入淡出。有些应该从左侧或右侧滑入。因此,我当然可以编写一个自定义函数来实现这一点。我不知道如何设置自定义函数,使其类似于fadeIn()函数,因为它接受一个回调函数,该函数将在动画完成时执行
例如,假设我有这样一个函数(不确定这是正确的格式):
我想用custom_animate()替换第一段代码中的所有fadeIn()调用,然后在该函数中,确定要执行的动画类型
有人能帮忙吗
谢谢-只需将in_callback_函数作为回调参数传递给在custom_animate()中调用的任何动画函数即可 而且,您当前的代码实际上可以使用计数器变量或其他东西,而不是重复的行;重复东西不是你的工作,而是电脑的工作 下面是一个未经测试的示例,应该可以让您继续(修复任何打字错误留给读者作为练习):
我喜欢这个概念-你能提供一个简单的例子吗?为我的目的做了一些轻微的修改,效果很好!非常感谢。只是一个简短的说明-我将$s别名为$j,因为我已经有了一个我们使用的自定义$s函数。
function custom_animate ( in_time_in_ms, in_callback_function ) {
// get class of element, and based on class perform either
// a fade-in, or a slide-in from left, or a slide-in from right
// then after animation is done, return control back to calling
// function so it can resume
}
$(something).fadeIn(1000, in_callback_function);
function my_animate(wrapper_id) {
var wrapper = $("#" + wrapper_id);
wrapper.find(".animate").hide();
// use data() to store the next index in the wrapper itself
wrapper.data("ani_seq", 1);
my_animate_run(wrapper);
}
function my_animate_run(wrapper) {
var seq = wrapper.data("ani_seq");
var el = wrapper.find("[ani_seq='" + seq + "']");
if (!el.length) // reached the last element
return;
wrapper.data("ani_seq", seq + 1); // update the sequence
var next = function() { my_animate_run(wrapper); };
// choose your type of animation here
el.fadeIn(1000, next);
}