Question

我想在jQuery中使用animate左右滑动div。到目前为止，我已经在this fiddle中加入了以下内容。

问题在于，每次我向左或向右点击时，我的变量都会返回到原始位置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>

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

Answer 2

你需要指定你的＆＃34;左＆＃34;每次通话时变量： -

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

Answer 3

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

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

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

3 个答案:

`DEMO`