Jquery为按下按钮的动画选择下一个eq(i+1)
Jquery为按下按钮的动画选择下一个eq(i+1)
提问于 2020-05-09 14:00:05
我想为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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-05-09 14:24:54
使用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61692475
复制相关文章
相似问题
腾讯云开发者
