Javascript 使用动画在jQuery中水平滑动框

我想在jQuery中使用animate左右滑动一个div。 到目前为止，我已经完成了以下工作

问题是，每次单击“左”或“右”时，我的变量“左”都会返回到加载时的原始位置，而不是当前位置。我做错了什么？我希望它在每次单击时向左移动，或在每次单击时从当前位置向右移动

    <div id="yellowbox"></div>
    <div id="left">left</div>
    <div id="right">right</div>


    <script>
        var left = $('#yellowbox').offset().left;
        console.log(left);

        jQuery(document).on('click', '#left', function(event) {
            $("#yellowbox").css({left:left}).animate({"left": (left -50)}, "slow");
        });

        jQuery(document).on('click', '#right', function(event) {
            $("#yellowbox").css({left:left}).animate({"left": (left +50)}, "slow");
        });
    </script>

    <style>     
    #yellowbox {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 0;
        right: 550px;
        background: yellow;
    }
    </style>

左边
正确的
var left=$（'#yellowbox'）.offset（）.left；
控制台日志（左）；
jQuery（文档）.on（'click'，'#left'，函数（事件）{
$（“#yellowbox”）.css（{left:left}）；
});
jQuery（文档）.on（'click'，'#right'，函数（事件）{
$（“#yellowbox”）.css（{left:left}）；
});
#黄箱{
宽度：50px；
高度：50px；
位置：绝对位置；
排名：0；
右：550px；
背景：黄色；
}

您应该删除对

.css

的调用，没有它，代码工作正常。因为，

.css

会直接修改位置，而不会产生任何效果，然后会产生动画

您需要在每次调用时分配“left”变量：-

var left = $('#yellowbox').offset().left;

    jQuery(document).on('click', '#left', function(event) {
        left = $('#yellowbox').offset().left;

        $("#yellowbox").css({left:left}).animate({"left": (left -50)}, "slow");
    });

    jQuery(document).on('click', '#right', function(event) {
       left = $('#yellowbox').offset().left;

        $("#yellowbox").css({left:left}).animate({"left": (left +50)}, "slow");
    });

---

每次单击都需要保存左侧变量：

var left = $('#yellowbox').offset().left;
console.log(left);

jQuery(document).on('click', '#left', function(event) {
    $("#yellowbox").css({left:left}).animate({"left": (left -50)}, "slow");
    left = $('#yellowbox').offset().left -50;
});

jQuery(document).on('click', '#right', function(event) {
    $("#yellowbox").css({left:left}).animate({"left": (left +50)}, "slow");
    left = $('#yellowbox').offset().left + 50;
});

---

谢谢，对不起，我不确定我是否描述得很清楚，每次点击我都希望它继续向左/向右移动谢谢，我会的，除了，尽管如果我们添加一些东西，当它离开屏幕时停止滚动，对其他人可能更有用？我已经把它加在这把小提琴上了，你想更新你的答案吗？（你可能会有比我更好的方法）@ak85干得好！很高兴看到进展：）为了更新我的答案，不，我不会，因为这是你的工作。不过有一些建议：1）您可以将屏幕的限制存储在一个变量中，以便以后使用，因为您的if条件会在每次按下按钮时计算该限制，从而导致大量内存使用。2） 每次使用$（window.resize（google！）调整窗口大小时，都要更新limit变量，从而消除

width

和'boxWidth`变量。否则，做得很好：D

var left = $('#yellowbox').offset().left;
console.log(left);

jQuery(document).on('click', '#left', function(event) {
    $("#yellowbox").css({left:left}).animate({"left": (left -50)}, "slow");
    left = $('#yellowbox').offset().left -50;
});

jQuery(document).on('click', '#right', function(event) {
    $("#yellowbox").css({left:left}).animate({"left": (left +50)}, "slow");
    left = $('#yellowbox').offset().left + 50;
});