jQuery - mousemoveの画像サイズを変更する

Question

&を画像からズームインすることが可能なアプリケーションに取り組んでいます。また、ズームインした場合にはパンすることもできます。http://picselbocs.com/projects/helsinki-map-applicationで実際に見ることができます。アプリケーションの開発時には

は、私が把握し、解決できない問題に遭遇した：/アウトでの変倍

、あなたは、地図上でマウスの左ボタンを押してからカーソルをドラッグしますか、ダウン。かなり多くの "クリック&ドラッグ"動作。考え方は、ポインタの最初の座標（マウスボタンを押したとき）を保存してから、それぞれmousemoveにカーソルを合わせた距離に基づいて新しいサイズ（ピクセル単位）を与えます。 私が遭遇した問題は、マウスのボタンを押してカーソルをドラッグした直後です。地図がぎこちなく動いています。それはちょっと凍りついてから、サイズを変更した後、もう一度フリーズします...これは数秒間してから正常に動作します。いくつかの点でそれはすべてこれを再び行うことができます。

なぜこのようなことが起こったのか、問題を解決する方法についてのアイデアがあれば、私と共有していただければ幸いです。

幸運を祈り、 アンドレイ

Answer 1

はそれのサイズを変更する前に、自分のイメージにアニメーションを停止してください。 イメージをサイズ変更可能にするためにjquery UIを使用することもできます。

Answer 2

は、私はあなたのコードが何であるか知らないが、あなたは多分ところで、あなたの問題

<form id="form1" runat="server"> 
<div align="center"> 
    <fieldset style="width:450px;height:320px;"> 
    <table border="0" cellpadding="3" cellspacing="3"> 
    <tr><td colspan="2" class="header">MOUSEOVER TO ZOOM 
    IMAGE</td></tr> 
    <tr><td colspan="2"></td></tr> 
    <tr> 
    <td colspan="2"> 
     <div class="imgcontainer"> 
     <asp:Image ID="Image1" CssClass="image" 
     ImageUrl="~/images/Image8.jpg" runat="server" /> 
     </div> 
    </td> 
    </tr> 
    </table> 
    </fieldset> 
</div> 
</form> 

<script language="javascript" type="text/javascript"> 
$(document).ready(function() { 
var zoom = 1.1; 
var move = -20; 
$("#Image1").hover(
function() { 
var imgwidth = $("#Image1").width() * zoom; 
var imgheight = $("#Image1").height() * zoom; 
$(this).animate({ 'width': imgwidth, 'height': 
imgheight, 'top': move, 'left': move }, { duration: 200 }); 
}, 
function() { 
//Reset the image 
$(this).animate({ 'width': $(".imgcontainer").width(), 
'height': $(".imgcontainer").height(), 'top': '0', 'left': '0' }, { 
duration: 100 }); 
}); 
}); 
</script>