Question

Does anyone know how I could achieve IE 7-9 support for (this in Codepen.io) button hover effect?

eg specifically:

transition-duration: 0.5s;
transition-property: all;
transition-timing-function: ease;
margin-top: 5px;

I tried this, however, margin-top will not animate. Others seem to..

What am I doing wrong?? Grateful for any help.

I have jQuery, Modernizr…

Thanks A lot

Harley

(Apologies in advance if this is a blatant duplicate, just I seem to have a particular problem)

Answer 1

Your problem is this line:

$(this).animate({margin-top:'5px'},{queue:false,duration:500});

You’ll either need to quote the CSS value or use camelcase:

$(this).animate({marginTop:'5px'},{queue:false,duration:500});
$(this).animate({'margin-top':'5px'},{queue:false,duration:500});

This pretty much applies to all CSS values with hyphens etc.