Jquery выбор следующего эквалайзера (i + 1) для анимации при нажатии кнопки

Question

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

$(document).ready(function() {
    var i = 0;
    $(document).keydown(function(e) {
        if (e.which == 39) {
            $("#mydiv:eq(i)").animate({
                left: "-=50"
            });
        }
        i++;
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="thing">
  <span>0</span>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>  
</div>

Answer 1

Используйте template string literals, чтобы передать значение i методу :eq.

$(document).ready(function() {
    var i = 0;
    $(document).keydown(function(e) {
        if (e.which == 39) {
            $(`.thing span:eq(${i})`).animate({
                  opacity: "0.5",
                  left: "+=50"
            }, 100);
        }
        i++;
    });
});

.thing {
  height: 130px;
  width: 100px;
  border: 1px black solid;

  display: block;
  left: 0px;
  position: relative;
}

span {
  display: block;
  background: #f00;
  margin-bottom: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="thing">
  <span>0</span>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>  
</div>