How to repeat executing a group elements in jQuery?
I have a problem. I am new to jQuery, and do not understand how can I repeat of my created animation. Here example of my code:
$("#text_rotator1_1").fadeIn(3000,function(){
$("#tex开发者_如何学运维t_rotator1_2").fadeIn(3000, function(){
$("#text_rotator1_3").fadeIn(3000, function() {
$("#text_rotator1_4").fadeIn(3000, function() {
$("#text_rotator1_1").fadeOut(1000);
$("#text_rotator1_2").fadeOut(1000);
$("#text_rotator1_3").fadeOut(1000);
$("#text_rotator1_4").fadeOut(1000, function() {
});
});
});
});
});
When all 4 elements are faded out, then I want to repeat fade in all elements. Like some while cycle... I think, you understand me :)
Wrap it inside a function, and call that function as your last callback:
function start(){
$("#text_rotator1_1").fadeIn(3000,function(){
$("#text_rotator1_2").fadeIn(3000, function(){
$("#text_rotator1_3").fadeIn(3000, function() {
$("#text_rotator1_4").fadeIn(3000, function() {
$("#text_rotator1_1").fadeOut(1000);
$("#text_rotator1_2").fadeOut(1000);
$("#text_rotator1_3").fadeOut(1000);
$("#text_rotator1_4").fadeOut(1000, start);
});
});
});
});
}
start();
example: http://jsfiddle.net/niklasvh/BYRkp/
I guess i'd do something like this, using custom events:
$('.text_rotators').bind('fadeMeIn',function(){
$(this).fadeIn("slow",function(){
$(this).trigger('fadeMeOut');
});
}).bind('fadeMeOut',function(){
$(this).fadeOut("slow",function(){
$(this).trigger('fadeMeIn');
});
});
$('.text_rotators').trigger('fadeMeIn');
精彩评论