Слайд-шоу JQuery с контроллерами противоположного действия

Question

У меня есть анимация слайд-шоу с небольшим количеством кода jquery, который мне нравится.Когда я нажимаю дальше, анимация запускается хорошо.Но когда я пытаюсь сделать противоположное, используя prev, у меня есть одно повторяющееся действие, прежде чем оно возвращается.

есть идеи, как мне это прыгнуть?

$("#slideshow > div:gt(0)").hide();

$("#after").click(function() {
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
});

$("#prev").click(function() {
  $('#slideshow > div:first')
    .appendTo('#slideshow')

    .fadeOut(1000)
    .prev()
    .fadeIn(1000)
    .end();

});

Смотрите здесь: https://codepen.io/1conu59/pen/bzJdzz

Answer 1

Итак, я разобрался с ответом!

Вот логика, стоящая за этим:

//Comments explanation

$("#btnAfter").click(function() {

   // I select the first div, the one at the top
  $('#slideshow > div:first')

    // I put it at the end of the stack
    .appendTo('#slideshow')    
});

// Here is the opposite logic
$("#btnPrev").click(function() {

  // Here I select the last div, the one at the bottom
  $('#slideshow > div:last')

    //I put it at the top of the stack which also move the dom selection with it
    .prependTo('#slideshow')        
});

Вот результат: https://codepen.io/1conu59/pen/gqJPjP

Это создает действительно ясную логику манипулирования DOM, аналогично смешиванию стопки карт.

Это несколько ресурсов, которые мне очень помогают:

https://www.elated.com/articles/jquery-adding-elements/

https://www.w3schools.com/jquery/jquery_ref_traversing.asp