我目前正在为我公司的网站制作一个简单的交互式 map 。我们正在努力完全摆脱闪存。
我正在做的是,将 map 上的点作为 css 圆圈(带有背景颜色和 css3 圆 Angular 的链接),将鼠标悬停在其上时,尺寸会略微扩大。
我遇到的问题是悬停动画不是很流畅。由于圆圈的性质,为了让它们在悬停时向外扩展而不向下移动,我不得不让圆圈的位置稍微移动(-5 像素在悬停动画结束时的顶部和左侧)。当我取下鼠标时,它会悬停回到原来的大小和位置,但它会跳一个像素,有时看起来很乱。
这是我当前原型(prototype)的链接:http://clients.taylordesign.com/td/map_v02/interactive-map.html
那么有没有办法让动画完美流畅呢?
我在 Mac、雪豹、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);
});
});
});
最佳答案
我会尝试将跨度放在一个 25x25 的盒子中,并使用 CSS 将其垂直和水平对齐到该盒子的中心。然后你不需要动画位置,只需要大小。我认为这会让您看起来更平滑。
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);
});
});
关于jquery - 有没有办法让这个 jquery 悬停动画更流畅?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11417608/