JSFiddle - React, Tailwind, and code Playground

by stnpwr

JavaScript

$(function(){

          $("#main #images img").each(function(i,e){//Не обязательно, но для идеала нужно выставить все картинки в одну скрытую позицию чтобы они с одной скоростью долетали 
                if(i > 0)
                      $(e).css({top:(-$("#main #images img").outerHeight() * i + $("#main #images img").outerHeight()) + "px"});
            });

            $("#main #list li").bind("click",function(){
                
                var num = $(this).attr("data-target");//получения номера(в массиве выборки) выбранной картинки
                var el = $("#main #images img")[num-1];//Выбранная картинка
                $("#main #images img").each(function(i,e){
                   if($(e).position().top == 0 && $(el).position().top != 0){
                       var animSpeed = 400;//Скорость анимации в мс
                       var heightContainerImg = $("#main #images img").outerHeight();//Высота контейнера в котором лежат картинки
                       var posHide = (-heightContainerImg * i + heightContainerImg)+ "px";//Позицию в которую переместить(скрыть) текущую (видимую)  картинку 
                       var posShow = -heightContainerImg * (num-1) + "px";// Позиция в которую вывести выбранную в списке картинку
                       $(e).animate({top: posHide},animSpeed,function(){
                           $(el).animate({top: posShow},animSpeed);
                       });
                       return false;
                   }
                });
            });

            $("#main #images img").each(function(i,e){
                        if($(e).position().top == 0)
                        alert("Есть элемент с нулевой позицией!");
                        console.log($(e).position().top);
                        });

        })