Jquery 放大和缩小适用于抖动而不是平滑

Question

我有一块画布。我必须缩放它直到按下放大按钮，并缩小它直到按下缩小按钮。我已经设法让它工作，但它有延迟。即使我松开了按钮，它也会不断放大或缩小。这就是我到目前为止尝试过的。请帮助我。您可以在实时站点上查看它 这里.

<script language="javascript">
    var timeout, clicker = $('#zoomin'),
        clicker2 = $('#zoomout');
    clicker.mousedown(function() {
        timeout = setInterval(function() {
            var wd = $("#canvas").width();
            var ht = $("#canvas").height();
            wd = parseInt(wd) + 250;
            ht = parseInt(ht) + 250;
            $("#canvas").animate({
                width: wd,
                height: ht
            });
            var ctx = canvas.getContext("2d");
            ctx.drawImage(backgroundImage, 0, 0, wd - 1, ht - 1);
            ctx.drawImage(outlineImage, 0, 0, wd - 1, ht - 1);
            redraw();
        }, 500);
        return false;
    });
    clicker2.mousedown(function() {
        timeout = setInterval(function() {
            var wd = $("#canvas").width();
            var ht = $("#canvas").height();
            wd = parseInt(wd) - 250;
            ht = parseInt(ht) - 250;
            if (wd < 500) {
                return false;
            }
            $("#canvas").animate({
                width: wd,
                height: ht
            });
            var ctx = canvas.getContext("2d");
            ctx.drawImage(backgroundImage, 0, 0, wd - 1, ht - 1);
            ctx.drawImage(outlineImage, 0, 0, wd - 1, ht - 1);
            redraw();
        }, 500);
        return false;
    });
    $(document).mouseup(function() {
        clearInterval(timeout);
        return false;
    });
    $("#zoomout").mousedown(function() {
        var wd = $("#canvas").width();
        var ht = $("#canvas").height();
        wd = parseInt(wd) - 250;
        ht = parseInt(ht) - 250;
        if (wd < 500) {
            return false;
        }
        $("#canvas").animate({
            width: wd,
            height: ht
        });
        var ctx = canvas.getContext("2d");
        ctx.drawImage(backgroundImage, 0, 0, wd - 1, ht - 1);
        ctx.drawImage(outlineImage, 0, 0, wd - 1, ht - 1);
        redraw();
        console.log(wd + ":" + ht);
    });
    $("#zoomin").click(function() {
        var wd = $("#canvas").width();
        var ht = $("#canvas").height();
        wd = parseInt(wd) + 250;
        ht = parseInt(ht) + 250;
        $("#canvas").animate({
            width: wd,
            height: ht
        });
        var ctx = canvas.getContext("2d");
        ctx.drawImage(backgroundImage, 0, 0, wd - 1, ht - 1);
        ctx.drawImage(outlineImage, 0, 0, wd - 1, ht - 1);
        redraw();
        console.log(wd + ":" + ht);
    });
    $("#zoomout").click(function() {
        var wd = $("#canvas").width();
        var ht = $("#canvas").height();
        wd = parseInt(wd) - 250;
        ht = parseInt(ht) - 250;
        if (wd < 500) {
            return false;
        }
        $("#canvas").animate({
            width: wd,
            height: ht
        });
        var ctx = canvas.getContext("2d");
        ctx.drawImage(backgroundImage, 0, 0, wd - 1, ht - 1);
        ctx.drawImage(outlineImage, 0, 0, wd - 1, ht - 1);
        redraw();
        console.log(wd + ":" + ht);
    });
</script>

Answer 1

禁用/删除您的点击处理程序。

单击事件在释放鼠标时触发。这意味着，您正在做的是，当用户释放鼠标时，您调用 jQuery 以进一步缩放画布。

如果删除单击处理程序，则画布在释放鼠标后不应继续动画。