Question

I’m currently working on a simple interactive map for my company’s website. We are trying to move away from flash entirely.

What I’m doing is, is making points on the map as css circles (link with background color and css3 rounded corners) that, when hovered over, expand in size slightly.

The problem I’ve come across is that the hover animation isn’t perfectly smooth. Due to the nature of the circles, in order for them expand outward on hover without moving downward, I had to make the location of the circle move slightly (-5 pixels on the top and left at the end of hover animation). When I take the mouse off, it hovers back down to the original size and position, however it jumps a pixel and looks messy sometimes.

Here is the link to my current prototype: http://clients.taylordesign.com/td/map_v02/interactive-map.html

So is there a way to make the animation perfectly smooth?

I’m looking at this on a 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);
    });
});

});

Answer 1

I would try to put the span in a 25×25 box and vertically and horizontally align it to center within that box using CSS. Then you don’t need to animate the position, just the size. I think that will give you a smoother look.

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);
  });
});

​