jQuery while loop not working

Question

Я просто пытаюсь выяснить, как перебирать элементы с одним классом и анимировать их по одному. Я подумал об этом, пока цикл будет работать, но я не понимаю, почему этого не произойдет.

$(document).ready(function() { 
    var index = 0; 
    var images = $('.image'); 

    while (index < images.length) { 
     var image = images[index]; 
     image.animate({ 
      opacity: "1" 
     }, 1000, function() { 
      index++; 
     }); 
    }; 
}); 

Херес Fiddle

Answer 1

Это простая реализация того, что @Evert brilliantly explains in another answer.

Приводя свой ответ здесь

индекс ++ вызывается в функции обратного вызова, который выполняется после анимации. Анимация начнется только после того, как этот скрипт прекратит выполнение .

Из-за этого индекс ++ никогда не запускается, и цикл никогда не заканчивается.

Вам необходимо переписать это как рекурсивную функцию. Обработчик событий , который теперь вызывает index ++, фактически должен отвечать за настройку следующей анимации .

Реализация может быть что-то вроде этого

var index = 0; 
var images = $('.image'); 
animate(images); 

function animate() { 
    var image = images.eq(index); 
    image.animate({ 
     opacity: "1" 
    }, 1000, function() { 
     index++; 
     animate(); 
    }); 
} 

Demo https://jsfiddle.net/dhirajbodicherla/w4cgctyk/2/

Answer 2

index++ вызывается в функции обратного вызова, который выполнен после анимации. Анимация только начиналась после, этот скрипт прекратил выполнение.

Из-за этого index++ никогда не запускается, и цикл никогда не заканчивается.

Вам необходимо переписать это как рекурсивную функцию. Обработчик событий, который теперь вызывает index++, фактически должен отвечать за настройку следующей анимации.

Answer 3

Там также JQuery .each функция используется следующим образом:

$('.class').each(function() { 
$(this).animate(); 
}); 

Где это следующий элемент с этим классом

Answer 4

Почему бы просто не использовать each функцию JQuery?

var images = $('.image'); 

$.each(images,function(){ 
    $(this).animate({ 
     opacity:"1" 
    }, 1000, function(){ 
     index++; 
    }); 
}); 

Answer 5

Ваша логика будет неправильно в index++; Вы должны иметь рекурсивную функцию. Вам нужно увеличить значение index в рамках рекурсивной функции.

function YourRecusiveFunction() { 
    var image = images.eq(index); 
    image.animate({ 
     opacity: '1' 
    }, 1000, function() { 
     index++; 
     YourRecusiveFunction(); 
    }); 
} 

Позвонить YourRecusiveFunction() после того, как документ будет готов.