Question

var leftright = 0;
//left is 0
//right is 1

$(document).ready(function(){
$("#StartContinue").click(function(){
    if (leftright === 0)
    {
        function imgLeft() {
            $("#b").animate({left: "-=1000"}, 5000, "swing", imgRight);
        }
        leftright = 0;
    }
    else
    {
        function imgRight() {
            $("#b").animate({left: "+=1000"}, 5000, "swing", imgLeft);
        }
        leftright = 1;
    }

    imgRight();
});

    $("#Stop").click(function(){
        $("#b").stop(true, false);
    });
});

它的作用是在屏幕上左右移动。当我按下我的停止按钮时图像向左移动并且我用另一个按钮继续移动时，它继续向右移动而不是像我在按下停止之前一样向左移动。我希望它在我按下停止之前恢复它的移动方式，而不是总是向右移动。

此外，它似乎再次开始循环。这意味着当它已经行进了500时，它会再增加1000个像素。我该怎么做才能让它最大化。距离是多少？

HTML：

<head>
<title>Assignment3</title>
<script src = "jquery-1.11.1.js"></script>
<script type = "text/javascript"  src = "jquery3-functions.js"></script>
</head>

<body>
   <button id="StartContinue">Start/Continue</button>
   <button id="Stop">Stop</button>
   <br />
   <div id="b" style="background:#98bf21;height:100px;width:100px;position:absolute;">
</body>

</html>

Answer 1

不要将函数放在if / else块中。另外，不要将CSS内联。

请尝试以下代码:(点击here查看工作示例）

$(document).ready(function(){

    var curPosition = 0;
    var curDirection = 'right';
    var maxDistance = 500;

    $("#StartContinue").click(function(){
        move();
    });

    $("#Stop").click(function(){
        stop();
    });

    function move()
    {
        if(curDirection == 'right' )
        {
            moveRight();
        }
        else
        {
            moveLeft();
        }
    }

    function moveRight()
    {
        curPosition = $("#b").position().left;
        curDirection ="right";
        var travel = maxDistance - curPosition;
        $("#b").animate({left: "+="+travel}, 1000, "swing", moveLeft);
    }

    function moveLeft()
    {
        curPosition = $("#b").position().left;
        curDirection ="left";
        var travel = curPosition;
        $("#b").animate({left: "-="+travel}, 1000, "swing", moveRight);
    }

    function stop() {
        $("#b").stop(true, false);
    }
});

如何以之前移动的方式恢复移动图像？

1 个答案: