JQuery изображения активные/неактивные загрузки

Question

Вот мой код

$(function(){ 
    var $list = $('.my-loading-list'), 
     $imgs = $list.find('img'), 
     animateImages = function(){ 
      var active = 0; 
      setInterval(function(){ 
       active = $list.find('img.active').index(); 
       if(active > $imgs.length){ 
        active = 0; 
       } else { 
        active++; 
       } 
       $imgs.attr('src', 'https://cdn3.iconfinder.com/data/icons/cool-me-down-thermometers/70/Weather_cloudy_grey-128.png'); 
       $imgs.eq(active).addClass('active').attr('src', 'https://cdn3.iconfinder.com/data/icons/vibrant-weather/70/Colour_Weather_cloudy_grey-128.png'); 
      }, 300); 

      setInterval(function(){ 
       $imgs.removeClass('active'); 
      }, 600); 
     }; 

    animateImages(); 
}); 

А вот фрагмент кода:

https://jsfiddle.net/8d4xfjgt/

Мне нужно анимировать третье изображение, а также. один и два меняют свой источник, но не третий.

Просьба предложить.

Answer 1

Вы хотите изменить 3 изображения по одному, как это, или все в одно и то же время? Проблема в том, что это значение не обновляется правильно active = $ list.find ('img.active'). Index(). Он принимает значения -1,0 в качестве альтернативы

$(function(){ 
     var $list = $('.my-loading-list'), 
      $imgs = $list.find('img'), 

      animateImages = function(){ 
       var active = 0; 
       setInterval(function(){ 



        if(active > $imgs.length){ 
         active = 0; 
        } else { 
         active++; 
        } 
        $imgs.attr('src', 'https://cdn3.iconfinder.com/data/icons/cool-me-down-thermometers/70/Weather_cloudy_grey-128.png'); 
        $imgs.eq(active).addClass('active').attr('src', 'https://cdn3.iconfinder.com/data/icons/vibrant-weather/70/Colour_Weather_cloudy_grey-128.png'); 
       }, 150); 

       setInterval(function(){ 
        $imgs.removeClass('active'); 
       }, 150); 
      }; 

     animateImages(); 
    });