有没有办法让这个 jquery 悬停动画更流畅?
Posted
技术标签:
【中文标题】有没有办法让这个 jquery 悬停动画更流畅?【英文标题】:Is there a way to make this jquery hover animation smoother? 【发布时间】:2012-07-10 04:23:29 【问题描述】:我目前正在为我公司的网站制作一个简单的交互式地图。我们正在尝试完全摆脱 Flash。
我正在做的是将地图上的点制作为 css 圆圈(带有背景颜色和 css3 圆角的链接),当将鼠标悬停在上面时,尺寸会略微扩大。
我遇到的问题是悬停动画不是很流畅。由于圆圈的性质,为了让它们在悬停时向外扩展而不向下移动,我必须使圆圈的位置稍微移动(悬停动画结束时顶部和左侧的 -5 个像素)。当我取下鼠标时,它会悬停回原来的大小和位置,但是它会跳跃一个像素并且有时看起来很乱。
这是我当前原型的链接:http://clients.taylordesign.com/td/map_v02/interactive-map.html
那么有没有办法让动画完美流畅呢?
我在 Mac、snow leopard、chrome、firefox 上看这个。
$(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);
);
);
);
【问题讨论】:
请添加您用于为圆圈设置动画的 jquery 代码。 【参考方案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);
);
);
【讨论】:
为此弄个 jsfiddle! 请注意,以防其他人在尝试此操作时发生这种情况,在将其调整到我们的网站时发生了一些奇怪的事情。除非我使用的是 HTML5 文档类型(我在网站上无论如何都使用它),否则它对我不起作用。不确定这只是我的浏览器还是其他东西。使用常规的 xhtml 过渡文档类型似乎不允许点在框 div 的中间垂直对齐。以上是关于有没有办法让这个 jquery 悬停动画更流畅?的主要内容,如果未能解决你的问题,请参考以下文章