Question

I am having trouble getting a CSS transition (to scale a div to 1.05 it’s original size) to play nicely alongside a jQuery animation on the page below:

http://www.griffinlive.com/video-packages

You can see the CSS transition in action when you hover over one of the colored divs, and clicking on the Email Us button triggers an animation but the animation is cut short.

I’ve confirmed that removing the CSS animation allows the jQuery animation to display correctly.

I’ve identified two courses of action:

• Remove the CSS transform from my style sheet and recreate the effect using jQuery.
• Remove the CSS transform when the use clicks on a link that is going to trigger an animation.

I think the first option is the better of the two as it allows the animation to reset itself to zero before being taken away. But I’m open to better ideas and thus posting this little problem here.

Thank you in advance for any assistance you can provide.

Answer 1

I would go for the first option also.

I would animate not clicked like this and make them disappear in a eye-candy way (personally I like opacity 0 effect aka .fadeOut() – which allows me to play with the non visible but opaque elements via jQuery).

$('#prices>div').not($clicked).animate({...});

Then I would animate the clicked element to go to the left hand side with something like the following code:

$('#prices>div').is($clicked).animate({'left':'0'});

Then I think you would want the mail form to appear on the right hand side? I would fade that in.

I should note that I haven’t tested any of those codes, just written from the top of my head to illustrate what I meant. I hope this helps.