有没有办法让这个jquery悬停动画更流畅?

时间:2012-07-10 16:18:30

标签: jquery css3 position jquery-animate

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

我正在做的是,在地图上将点作为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);
    });
});

});

1 个答案:

答案 0 :(得分:1)

我会尝试将跨度放在一个25x25的盒子中,并使用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);
  });
});

​