Javascript 将div设置回其原始位置的动画（循环需要重复）

我有以下HTML

<div id="mrdiv"/>
<input type="button" style="position: absolute;top: 100px;"onclick="one();"></input>
<input type="button" style="position: absolute;top: 100px; left: 50px;" onclick="two();"/>

CSS

#mrdiv{
    position:absolute;
    background-color: black;
    width: 100px;
    height: 100px;
}

最后但并非最不重要的是： 出于某种奇怪的原因，我不明白为什么按钮不起作用，但我想代码足以理解我想要什么

---

基本上，当我执行animate函数时，div将正确地设置动画，但仅在代码的第一段中。我的意思是，如果我单击按钮one，那么两个按钮将不起作用，反之亦然。我需要他们两个都工作，并且重复地做这件事，但我不明白他们为什么不这样做。关于这个有什么想法吗？对不起，小提琴坏了，我在等的时候试着把它弄好

您的

右侧

和

左侧

值相互竞争。您需要根据需要禁用它们：

将您的单击处理程序从HTML中删除是一个很好的做法，如下所示：

正如我所怀疑的，您实际上想要不同于代码所指示的行为。下面是防止动画跳到屏幕两侧的方法。仅对一个属性设置动画：

---

“未捕获引用错误：一个未定义”“未捕获引用：我不明白为什么按钮不工作，但我想代码足以理解我想要的。（……）对不起，小提琴坏了，我会在等待时尝试让它工作！”：Sphere是一把可以工作的小提琴。你需要把你的功能载入大脑。答案更新到移动属性重置到动画方法之外。这不是我想要的。。。我想让它左右移动14px，或者，小提琴只会反弹到极限操作系统客户端。那么，您只需要修改左侧的

。这里：您需要添加逻辑以将其保留在屏幕上。

#mrdiv{
    position:absolute;
    background-color: black;
    width: 100px;
    height: 100px;
}

function one() {
    $("#mrdiv").stop(true).animate({
        right: "+=14"
    }, 200).css('left', 'auto');
}

function two() {
    $("#mrdiv").stop(true).animate({
        left: "+=14"
    }, 200).css('right', 'auto');
}

$(function () {
    $('#mrdiv input').click(function () {
        if ($(this).index() == 1) {
            one();
        } else {
            two();
        }
    });
});

function one() {
    $("#mrdiv").stop(true).animate({
        left: "-=14"
    }, 200);
}

function two() {
    $("#mrdiv").stop(true).animate({
        left: "+=14"
    }, 200);
}