有没有办法让这jQuery的悬停动画更流畅？

Question

我目前正在为我公司的网站制作简单的互动地图。我们正试图完全摆脱闪光。

我正在做的是，在地图上将点作为css圆圈（与背景颜色和css3圆角链接），当它在盘旋时略微扩大。

我遇到的问题是悬停动画不是非常平滑。由于这些圆的本质，为了让它们向外扩展而不向下移动，我必须使圆的位置略微移动（顶部-5像素，并且悬停动画结束时离开）。当我将鼠标移开时，它会回到原来的大小和位置，但是它跳过一个像素，有时看起来很乱。

这里是链接到我目前的原型：http://clients.taylordesign.com/td/map_v02/interactive-map.html

那么，有没有一种方法，使动画完美流畅？

我正在看Mac，雪豹，铬，火狐这个。

$(document).ready(function(e) { 

$('a.location').each(function() { 

    var pos = $(this).find('span').position(); 
    var posLeftHover = (pos.left - 5); 
    var posTopHover = (pos.top - 5); 

    $(this).hover(function() { 
     $(this).find('span').stop(true, false).animate({ 
      height: '25px', 
      width: '25px', 
      left: posLeftHover, 
      top: posTopHover 
     }, 200); 
    }, function() { 
     $(this).find('span').stop(true, false).animate({ 
      height: '15px', 
      width: '15px', 
      left: pos.left, 
      top: pos.top 
     }, 200); 
    }); 
}); 

}); 

Answer 1

我会尝试把跨度在25×25盒，垂直和水平对齐使用CSS那个盒子内中心。那么你不需要动画的位置，只是大小。我认为这会让你看起来更平滑。

http://jsfiddle.net/9LXSv/

CSS：

.box {width:25px; height:25px; text-align:center; position:absolute;} 
.dot {width:15px; height:15px; vertical-align:middle; background:red; display:inline-block;}​ 

HTML：

<div class="box" style="left:100px; top:100px;"> 
    <span class="dot"></span> 
</div> 

<div class="box" style="left:200px; top:100px;"> 
    <span class="dot"></span> 
</div> 
​ 

JS：

$(document).ready(function(e) { 

    $('.box').hover(function() { 
    $(this).find('span').animate({ 
     height: '25px', 
     width: '25px' 
    }, 200); 
    }, function() { 
    $(this).find('span').animate({ 
     height: '15px', 
     width: '15px' 
    }, 200); 
    }); 
}); 

​