Javascript jQuery动画在指定div上停止

我做了一个水平式轮盘赌。问题在于，除1920x1080决议外，它不会在其他决议的正确div上停止

当前jQuery代码如下所示：

$(document).ready(function() {
    $("#roll").click(function() {

        if ($(this).hasClass('disabled')) {
            return false;
        }

        $("#roll").html("Rolling...").addClass("disabled");

        var lineArrays = ['2985px', '2995px', '3005px', '3015px', '3025px', '3035px', '3045px', '3055px', '3065px', '3075px', '3085px', '3095px', '3100px'];

        var landLine = lineArrays[Math.floor(Math.random() * lineArrays.length)];
        console.log(landLine);

        $(".imageBox").animate({
            right: landLine
        }, {
            duration: 10500,
            easing: 'easeOutQuint'
        });



    });
});

  <div class="imageBox" id="1"> <img src="image here"> </div>
  <div class="imageBox" id="2"> <img src="image here"> </div>
  <div class="imageBox" id="3"> <img src="image here"> </div>
  <div class="imageBox" id="4"> <img src="image here"> </div>
  <div class="imageBox" id="5"> <img src="image here"> </div>
  <div class="imageBox" id="6"> <img src="image here"> </div>
  <div class="imageBox" id="7"> <img src="image here"> </div>
  <div class="imageBox" id="8"> <img src="image here"> </div>
  <div class="imageBox" id="9"> <img src="image here"> </div>
  <div class="imageBox" id="10"> <img src="image here"> </div>
  <div class="imageBox" id="11"> <img src="image here"> </div>
  <div class="imageBox" id="12"> <img src="image here"> </div>
  <div class="imageBox" id="13"> <img src="image here"> </div>
  <div class="imageBox" id="14"> <img src="image here"> </div>
  <div class="imageBox" id="15"> <img src="image here"> </div>
  <div class="imageBox" id="16"> <img src="image here"> </div>
  <div class="imageBox" id="17"> <img src="image here"> </div>
  <div class="imageBox" id="18"> <img src="image here"> </div>
  <div class="imageBox" id="19"> <img src="image here"> </div>
  <div class="imageBox" id="20"> <img src="image here"> </div>
  <div class="imageBox" id="21"> <img src="image here"> </div>
  <div class="imageBox" id="22"> <img src="image here"> </div>
  <div class="imageBox" id="23"> <img src="image here"> </div>
  <div class="imageBox" id="24"> <img src="image here"> </div>
  <div class="imageBox" id="24"> <img src="image here"> </div>
  <div class="imageBox" id="25"> <img src="image here"> </div>
  <div class="imageBox" id="26"> <img src="image here"> </div>
  <div class="imageBox" id="27"> <img src="image here"> </div>
  <div class="imageBox imageBoxW" id="28"> <img src="image here"> </div> // this is the div where it stops on 1920x1080 resolution
  <div class="imageBox" id="29"> <img src="image here"> </div>
  <div class="imageBox" id="30"> <img src="image here"> </div>
  <div class="imageBox" id="31"> <img src="image here"> </div>
  <div class="imageBox" id="32"> <img src="image here"> </div>
  <div class="imageBox" id="33"> <img src="image here"> </div>
  <div class="imageBox" id="34"> <img src="image here"> </div>
  <div class="imageBox" id="35"> <img src="image here"> </div>
  <div class="imageBox" id="36"> <img src="image here"> </div>

所以它从

var Linearray

中获得随机位置，然后停止

HTML如下所示：

$(document).ready(function() {
    $("#roll").click(function() {

        if ($(this).hasClass('disabled')) {
            return false;
        }

        $("#roll").html("Rolling...").addClass("disabled");

        var lineArrays = ['2985px', '2995px', '3005px', '3015px', '3025px', '3035px', '3045px', '3055px', '3065px', '3075px', '3085px', '3095px', '3100px'];

        var landLine = lineArrays[Math.floor(Math.random() * lineArrays.length)];
        console.log(landLine);

        $(".imageBox").animate({
            right: landLine
        }, {
            duration: 10500,
            easing: 'easeOutQuint'
        });



    });
});

  <div class="imageBox" id="1"> <img src="image here"> </div>
  <div class="imageBox" id="2"> <img src="image here"> </div>
  <div class="imageBox" id="3"> <img src="image here"> </div>
  <div class="imageBox" id="4"> <img src="image here"> </div>
  <div class="imageBox" id="5"> <img src="image here"> </div>
  <div class="imageBox" id="6"> <img src="image here"> </div>
  <div class="imageBox" id="7"> <img src="image here"> </div>
  <div class="imageBox" id="8"> <img src="image here"> </div>
  <div class="imageBox" id="9"> <img src="image here"> </div>
  <div class="imageBox" id="10"> <img src="image here"> </div>
  <div class="imageBox" id="11"> <img src="image here"> </div>
  <div class="imageBox" id="12"> <img src="image here"> </div>
  <div class="imageBox" id="13"> <img src="image here"> </div>
  <div class="imageBox" id="14"> <img src="image here"> </div>
  <div class="imageBox" id="15"> <img src="image here"> </div>
  <div class="imageBox" id="16"> <img src="image here"> </div>
  <div class="imageBox" id="17"> <img src="image here"> </div>
  <div class="imageBox" id="18"> <img src="image here"> </div>
  <div class="imageBox" id="19"> <img src="image here"> </div>
  <div class="imageBox" id="20"> <img src="image here"> </div>
  <div class="imageBox" id="21"> <img src="image here"> </div>
  <div class="imageBox" id="22"> <img src="image here"> </div>
  <div class="imageBox" id="23"> <img src="image here"> </div>
  <div class="imageBox" id="24"> <img src="image here"> </div>
  <div class="imageBox" id="24"> <img src="image here"> </div>
  <div class="imageBox" id="25"> <img src="image here"> </div>
  <div class="imageBox" id="26"> <img src="image here"> </div>
  <div class="imageBox" id="27"> <img src="image here"> </div>
  <div class="imageBox imageBoxW" id="28"> <img src="image here"> </div> // this is the div where it stops on 1920x1080 resolution
  <div class="imageBox" id="29"> <img src="image here"> </div>
  <div class="imageBox" id="30"> <img src="image here"> </div>
  <div class="imageBox" id="31"> <img src="image here"> </div>
  <div class="imageBox" id="32"> <img src="image here"> </div>
  <div class="imageBox" id="33"> <img src="image here"> </div>
  <div class="imageBox" id="34"> <img src="image here"> </div>
  <div class="imageBox" id="35"> <img src="image here"> </div>
  <div class="imageBox" id="36"> <img src="image here"> </div>

//这是div，其分辨率为1920x1080

所以它应该停在

上，但我还没有弄明白这是怎么可能的

---

我希望能从这里得到帮助。

我不知道它是否应该在基于该线性阵列的X宽度上随机停止，或者是否可以在随机元素上停止。我添加了一些代码来获取一个随机元素，并将imageBoxw类添加到该随机元素中，也许您可以根据该选择使其停止。单击单词click lol后，类名将添加到元素中，请选中dev tools

$（文档）.ready（函数（）{
$（“#滚动”）。单击（函数（）{
if（$（this）.hasClass（'disabled'））{
返回false；
}
$（“#滚动”）.html（“滚动…”）.addClass（“禁用”）；
变量线性排列=['2985px'，'2995px'，'3005px'，'3015px'，'3025px'，'3035px'，'3045px'，'3055px'，'3065px'，'3075px'，'3085px'，'3095px'，'3100px']；
var elements=document.getElementsByClassName（“imageBox”）；
//console.log（elements）；//37个具有该类名的元素
//选择一个随机元素索引
var randElement=Math.floor（Math.random（）*elements.length）；
//获取该元素的id并向其添加一个类
var elementId=元素[randElement].id
$（'#'+elementId+''）.addClass（'imageBoxW'）；
//console.log（元素[randElement]）；
//在那个随机元素上停止动画？
var landLine=linearray[Math.floor（Math.random（）*linearray.length）]；
//控制台日志（线性阵列索引（固定线路））；
$（“.imageBox”）.animate（{//可能在这里对随机选择的元素执行一些操作。
右：固定电话
}, {
时长：10500，
放松：'easeOutQuint'
});
});
});

点击
您能创建一个stacksnippets来演示吗？为什么动画要停在
？@guest271314是的，请稍等，我会创建它。因为在不同的分辨率下，它不会在正确的div上停止。