How to create a scale effect in jQuery

Question

I've got the following CSS transition: http://jsfiddle.net/cW3Ts/

This keeps jumping and is not compatible/buggy in some browsers so I would like to create it using jQuery. I've got the fadeIn sorted as such (example):

$(this).animate({backgroundColor: '#58a5e1'}, 400);

Unfortunately, I am finding it difficult to scale/ease the div in and out on hover. I have tried animate height and width but this does create the same effect. I have also looked at jQuery UI scale and I can not get the scale to work on a dic when hovered, their example shows a toggle and it just breaks the hover function altogether. Does anyone know a solution or a plugin I could use so I can get the similar effect that the CSS does (scale and ease).

I would be so grateful as I've been researching all day and almost ready to give up!

Answer 1

You could use jQuery animate, but I think the css transitions look a lot smoother for browsers that support them. You may want to consider using a conditional comment or something like that so the script is only used when necessary.

Working Example

$('.cta').hover(function () {
    $(this).removeClass('dark-grey-bg', 800).addClass('blue-bg-fade', 400).animate({
        height: $(this).height() * 1.05,
        width: $(this).width() * 1.05
    }, 300);
    $(this).find('a').removeClass('grey').addClass('white').animate({
        fontSize: '105%'
    }, 300);

}, function () {
    $(this).addClass('dark-grey-bg', 400).removeClass('blue-bg-fade', 800).animate({
        height: $(this).height() / 1.05,
        width: $(this).width() / 1.05
    }, 300);

    $(this).find('a').removeClass('white', 400).addClass('grey', 800).animate({
        fontSize: '100%'
    }, 300);
});

Here's an example of a conditional comment that should work for IE9 and below

<!--[if lte IE 9]>
    // insert script here
<![endif]-->