センターからの画像をパーセントで拡大しますか？

Question

jQueryを使用しているWebサイトでは、ページ上にグラフィックスが表示され、クリックするとそのサイトの別のセクションに情報が表示されます。マウスオーバーすると、画像は中央からパーセンテージだけ拡大します。問題は、アニメーションが完了する前にすぐにマウスを出し入れすると、画像のサイズが正しく変更されないことです。ように：「高身長」と画像のサイズを変更することは、単純になるので（。彼らは小さくなり）

$(".locationimg").hover(
     function(){ 
      var height = $(this).height() 
      var width = $(this).width() 
      var top = $(this).position().top 
      var left = $(this).position().left 
      $(this).stop().animate({ 
       height: height*1.1 + 'px', 
       width: width*1.1 + 'px', 
       top: top - (((height*1.1)-height)/2) + 'px', 
       left: left - (((width*1.1)-width)/2) + 'px' 
      }); 
     }, 
     function(){ 
      var height = $(this).height() 
      var width = $(this).width() 
      var top = $(this).position().top 
      var left = $(this).position().left 
      var height1 = height/1.1 
      var width1 = width/1.1 
      $(this).stop().animate({ 
       height: height1 + 'px', 
       width: width1 + 'px', 
       top: top - (((height1)-height)/2) + 'px', 
       left: left - (((width1)-width)/2) + 'px' 
      }); 
     } 
    ); 

変数が.hover（に入る前に定義することができた場合）、これは簡単だろう。この問題は、これを行う必要がある複数の画像があるため、変数を.hover（）内で定義する必要があることです。

Answer 1

stop(false, true)の代わりにstop()の代わりに使用してください。これは、新しいアニメーションが開始される前にアニメーションが「完了」されることを意味します。

さらに、data()機能を使用して、要素に高さと幅を格納することができます。代わりに計算しようとしているの、ホバーハンドラ内で次に

$(".locationimg").each(function() { 
    var $this  = $(this), 
     origWidth = $this.width(), 
     origHeight = $this.height(), 
     zoomWidth = origWidth * 1.1, 
     zoomHeight = origHeight * 1.1, 
     pos  = $this.position(), 
     origTop = pos.top, 
     origLeft = pos.left 
     // ... also find zoomed top, left... 
    ; 
    $this.data({ 
     "origwidth": origWidth, 
     "origHeight": origHeight, 
     "zoomWidth": zoomWidth, 
     "zoomHeight": zoomHeight 
     /* etc. */ 
     /* ... also store top and left... */ 
    }); 
}).hover(
    // your hover code here 
) 

：ホバー前

Answer 2

（）、あなたは画像自体の属性データにそれぞれの元とズームの寸法と位置を保存することができあなたが既に格納している次元/位置を読み、マウスオーバー時にズームしたものに、またはマウスアウト時に元のものに移行することができます。これはまたずっと速くなります。