使用jQuery实现按右箭头时Div内下一个元素的动画效果求助

先看你代码里的几个关键问题：

• 选择器错误：你HTML里的容器是class="thing"，但JS里用了$("#mydiv")，根本找不到目标元素；而且:eq(i)的写法不对，变量i不能直接嵌在字符串选择器里，得用更合理的方式插入变量值。
• 元素定位问题：<span>是行内元素，默认不支持left属性，得先给它设置position: relative（或absolute）才能让animate的位移动画生效。
• 计数器逻辑问题：你现在把i++放在了键盘事件的外层，哪怕按的不是右箭头，i也会递增；而且没有限制i的最大值，当超过span数量后再按箭头会找不到元素。

下面是修正后的完整代码：

HTML部分 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
  .thing span {
    position: relative; /* 关键：让span支持left属性的位移 */
    display: inline-block; /* 可选：优化行内元素的布局稳定性 */
    margin-right: 10px; /* 可选：给元素间加间距，动画效果更明显 */
  }
</style>
<div class="thing">
  <span>0</span>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
</div>

JavaScript部分 #

$(document).ready(function() { 
    var i = 0; 
    // 缓存所有span元素，避免重复DOM查询提升性能
    const $spans = $(".thing span");
    const totalSpans = $spans.length;

    $(document).keydown(function(e) { 
        if (e.which == 39) { 
            // 只有当i小于总元素数时才执行动画
            if (i < totalSpans) {
                $spans.eq(i).animate({ left: "-=50" }); 
                i++;
            }
        }
    }); 
});

关键修正点解释： #

1. 选择器优化：用$(".thing span")获取所有目标元素并缓存，再用.eq(i)方法定位对应索引的元素，比字符串拼接更简洁可靠。
2. 样式补充：给span添加position: relative，让位移动画的left属性生效。
3. 计数器逻辑调整：把i++放到右箭头的判断分支里，只有按右箭头才递增；同时增加i < totalSpans的判断，防止超出元素数量后执行无效操作。

这样每次按右箭头，就会依次让下一个span执行左移50px的动画啦~

内容的提问来源于stack exchange，提问作者Dheeraj Kumar