Scaling rounded images using CSS3 and animate()

I'm trying to create a scale functionality for certain images when they are hovered, while maintaining a rounded image effect using CSS3. See code below:

  $(".nodes a").hover(function() {
    if (!$(this).hasClass('inactive')) {
      $(this).css({'z-index' : '99'});
      $(th开发者_高级运维is).find('span').addClass('active');
      $(this).find('span').addClass("hover").stop().animate({ marginTop: '-24px', marginLeft: '-24px', top: '50%', left: '50%', width: '80px', height: '80px', WebkitBorderTopLeftRadius: 40, WebkitBorderTopRightRadius: 40, WebkitBorderBottomLeftRadius: 40, WebkitBorderBottomRightRadius: 40, MozBorderRadius: 40, BorderRadius: 40 }, 250); }
  }, function() {
    if (!$(this).hasClass('inactive')) {
      $(this).css({'z-index' : '0'});
      $(this).find('span').removeClass('active');
      $(this).find('span').removeClass("hover").stop().animate({ marginTop: '0', marginLeft: '0', top: '0', left: '0', width: '32px', height: '32px', WebkitBorderTopLeftRadius: 32, WebkitBorderTopRightRadius: 32, WebkitBorderBottomLeftRadius: 32, WebkitBorderBottomRightRadius: 32, MozBorderRadius: 32, BorderRadius: 32 }, 250); }
  });

The HTML looks like this -

<ul class="nodes">
  <li>
    <a href="/">
      <span style="background: url(image.jpg) no-repeat center center; width: 32px; height: 32px;">
        <img src="image.jpg" style="opacity: 0;" />
      </span>
    </a>
  </li>
</ul>

What I can't get to work is the MozBorderRadius when animating (it doesn't keep a consistant circle, WebkitRadius and BorderRadius seems to work though), as well as keeping the image centered as it animates. I figured giving the image a MarginTop and marginLeft of half the amount of width and size added to it when animating would do, but it just aligns itself to the bottom.

You don't have to set all corners of webkit radius, just "WebkitBorderRadius" is enough.

And for animating MozBorderRadius, you can use ( "border-radius" : "40px" ). Here is your code working on webkit and moz :

$(".nodes a").hover(function() {
    if (!$(this).hasClass('inactive')) {
        $(this).css({'z-index' : '99'});
        $(this).find('span').addClass('active');
        $(this).find('span').addClass("hover").stop().animate({ 
            marginTop: '-24px', 
            marginLeft: '-24px', 
            top: '50%', 
            left: '50%', 
            width: '80px', 
            height: '80px', 
            'border-radius' : '40px',
            WebkitBorderRadius: 40,
            BorderRadius: 40,
        }, 250);
    }
}, function() {
    if (!$(this).hasClass('inactive')) {
        $(this).css({'z-index' : '0'});
        $(this).find('span').removeClass('active');
        $(this).find('span').removeClass("hover").stop().animate({ 
            marginTop: '0', 
            marginLeft: '0', 
            top: '0', 
            left: '0', 
            width: '32px', 
            height: '32px', 
            'border-radius' : '32px',
            WebkitBorderRadius: 32,
            MozBorderRadius: 32, 
            BorderRadius: 32
        }, 250); 
    }
});