Jquery放大和縮小的工作，而不是光滑的跳動

Question

我有一個畫布。我必須縮放它，直到按下放大按鈕並縮小它，直到按下縮小按鈕。我已經設法讓它工作，但它延遲工作。並且即使在我釋放按鈕時它也會保持放大或縮小。這是我到目前爲止所嘗試的。請幫幫我。您可以通過Here在現場查看。

<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來進一步縮放畫布。

如果刪除點擊處理程序，則在鼠標釋放後畫布不應該繼續動畫。