Javascript 多次设置函数调用的动画

我创建了一个简单的JavaScript文件，其中有两个图像

在这里，用户可以向左或向右滑动&相应地，图像可以滑动

这是我的密码

$('#landscapeimage1').swiperight(function (event) { //here lanscapeimage1 is canvas on which i have drawn an image.

    var width = window.innerWidth;
    var slide = "+=" + width + "px";
    $('#landscapeimage').animate({'left': -width}, 1, function () {
        $('#landscapeimage1').animate({"left": slide}, "fast", function () {});
        $('#landscapeimage').animate({"left": slide}, "fast", function () {
            currentImage = getPreviousImage();
            currentCanvas = "landscapeimage";

            drawImage();
            $(this).unbind(event);
            return false;
        });
        return false;
    });

    return false;
});

最初，当我刷卡时，它工作正常，但如果我访问同一个图像，它会再次调用相同的函数&直到未访问的图像没有出现&如果我访问了所有图像，它会进入无限循环。

我不明白为什么会这样

我试图停止动画和取消绑定滑动功能，但它也不工作

<div data-role="page" id="imagepage">

            <div class="whiteBackground" id="landscapeimage" style="position: relative;">
                <canvas id="image" style="z-index: 1;position:absolute;left:0px;top:0px;" height="200px" width="200px">
                </canvas>
                </div>

<div class="whiteBackground" id="landscapeimage1" style="position: relative;">
                <canvas id="image1" style="z-index: 1;position:absolute;left:0px;top:0px;" height="200px" width="200px">
                </canvas>
                </div>

        </div>

调试后，我发现多次调用的动画函数不是滑动函数，但我不明白为什么？请帮帮我

---

有人知道为什么会发生这种情况吗？

试试“左”：“-”+width+“px”，这可能是导致问题的原因。尝试在

swiperight（）中使用
event.stoppropagation（）
，这将阻止任何不必要的事件传播，如果您可以使用
stoppropagation（）在JSIDLE上复制相同的事件的话
它也会停止刷卡。对不起，我不知道如何使用jsfiddle.net（比如put image和all）