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を呼び出してさらにキャンバスをズームするということです。

クリックハンドラを削除した場合、キャンバスはマウスを離した後でもアニメーション化されません。