Jquery selecting next eq(i+1) for animation on pressing button

Question

I want to render animation for next image in a div, that when I press arrow button every time it render animation of next image in that div. I have tried this code please help.

$(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

Use template string literals to pass the value of i to the :eq method.

$(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>