在带有动画的jQuery中水平滑动框答案

【问题标题】：Slide box horizontally in jQuery with animate在带有动画的jQuery中水平滑动框
【发布时间】：2014-03-18 09:46:35
【问题描述】：

我想在 jQuery 中使用动画左右滑动 div。到目前为止，我在this fiddle 中包含以下内容。

问题在于，每次我向左或向右单击时，我的变量 left 都会返回到 onload 的原始位置，而不是其当前位置。我在这里做错了什么？我希望它在每次点击时向左移动，或者在每次点击时从当前位置向右移动。

    <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>

【问题讨论】：

标签： javascript jquery html css jquery-animate

【解决方案1】：

您应该删除对.css 的调用，没有它代码可以正常工作。因为.css直接修改了位置，没有任何效果，然后动画就发生了。

`DEMO`

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


$(document).on('click', '#left', function(event) {
    left -= 50;   // you were not modifying the variable here
    $("#yellowbox").animate({
        "left": left 
    }, "slow");
});

$(document).on('click', '#right', function(event) {
    left += 50;  // you were not modifying the variable here
    $("#yellowbox").animate({
        "left": left
    }, "slow");
});

【讨论】：

谢谢，对不起，我不确定我是否清楚地描述了它，每次点击我希望它继续向左/向右移动
谢谢，我会例外，尽管如果我们添加一些东西以在它离开屏幕时停止滚动可能对其他人更有用？我已经在这个小提琴中添加了它，jsfiddle.net/aaronk85/7urNX/3 你想更新你的答案吗？（你可能会有比我做的更好的方法）
@ak85 干得好！很高兴看到进展:) 为了更新我的答案，不，我不会，因为这是你的工作。不过只是一些建议：1）您可以将屏幕的限制存储在一个变量中以供以后使用，因为您的 if 条件会在每次按下按钮时计算它，从而导致大量内存使用。 2) 每次使用 $(window).resize (google!) 调整窗口大小时更新限制变量，从而消除 width 和 `boxWidth` 变量。否则，做得很好：D
Here's that thing I just created it.

【解决方案2】：

每次点击都需要保存左边的变量：

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;
});

【讨论】：

【解决方案3】：

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

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");
    });

【讨论】：