ожидайте каждого jQuery
Я пытаюсь заставить отделение исчезнуть в/, это в каждом операторе. Проблема состоит в том, что следующий объект называют, прежде чем исчезновение в / завершено.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<div id='one'>one</div>
<div id='two'>two</div>
<div id='three'>three</div>
<script>
$.each([ "one", "two", "three"], function() {
console.log( 'start - ' + this );
animate( this );
console.log( 'end - ' + this );
});
function animate( id )
{
box = '#' + id;
$(box).fadeOut( 500, function( )
{
console.log('showing - ' + id);
$(box).fadeIn( 500 );
$(box).css('backgroundColor','white');
});
}
</script>
консольные шоу -
start - one
end - one
start - two
end - two
start - three
end - three
showing - one
showing - two
showing - three
Я хотел бы что-то как -
start - one
showing - one
end - one
start - two
showing - two
end - two
start - three
showing - three
end - three
Таким образом, как я могу ожидать каждого 'каждый', чтобы быть полностью законченным перед хождением дальше к следующему значению?
3 ответа
Ваше собирается использовать обратные вызовы - функции, которые выполняются, когда текущая функция закончена. Чтобы сделать это с .fadeout Вы бы сделали:
$('#element').fadeOut( 400, myFunction );
Myфункция не будет называться, пока Fadeout не будет завершен. Ajax звонки с $ .get также могут иметь функции обратного вызова.
Вот пример, который работает, хотя я уверен, что есть лучший способ:
function animate(myArray, start_index) {
// Stealing this line from Sam, who posted below.
if(!start_index) start_index = 0;
next_index = start_index+1;
if(next_index > myArray.length) { return; }
box = '#' + myArray[start_index];
$(box).fadeOut(500, function() { animate(myArray,next_index); });
}
, а потом в вашем документе. Назовете:
animate(theArray);
Как насчет того, чтобы анимировать, проходя через каждый элемент массива внутри функции?
var elements = [ "one", "two", "three"];
animate(elements);
function animate( elements, index )
{
if(!index) index = 0;
var box = '#' + elements[index];
var $$box = $("#box");
console.log( 'start - ' + elements[index] );
$$box.fadeOut( 500, function( )
{
console.log('showing - ' + elements[index]);
$$box.fadeIn( 500, function() {
console.log( 'end - ' + elements[index] );
if(elements[++index]) animate(elements, index);
} ).css('backgroundColor','white');
});
}
Вы даже можете зацикливаться обратно к началу, если хотите:
var elements = [ "one", "two", "three"];
animate(elements);
function animate( elements, index )
{
if(!index) index = 0;
var box = '#' + elements[index];
var $$box = $(box);
console.log( 'start - ' + elements[index] );
$$box.fadeOut( 500, function( )
{
console.log('showing - ' + elements[index]);
$$box.fadeIn( 500, function() {
$$box.css('backgroundColor','white');
console.log( 'end - ' + elements[index] );
// go to next element, or first element if at end
index = ++index % (elements.length);
animate(elements, index);
} );
}).css('backgroundColor', 'aqua');
}
Похоже, вы пытаетесь «циклически» через список Divs. Вы проверили плагин jQuery Cycle Plugin ?