javascript - Using Modernizr.prefixed in jQuery .animate -

i'm not jquery syntax php thing.

i'm trying produce jquery animation correct vendor prefixes on multiple values, understanding of usage of modernizr.prefixed letting me down.

what i'm trying like:

    $('.rightbox3d').animate({         opacity: 1         ,top:"60px"         ,modernizr.prefixed('transform'):"translatey(-200px)"         ,modernizr.prefixed('scale'):2     }, 4000); 

ie. want include vendor prefixes in list of styles animated, syntax error - unexpected token.

i have tried using var transformproperty = modernizr.prefixed ? modernizr.prefixed('transform') : 'transform'; allows listing 1 style ie: $(".rightbox3d").animate(transformproperty,"translatey(-200px)"); when want multiple styles transform, opacity, scale etc.

i notice that line of code doesn't have brace brackets around transformproperty part, whereas list eg. $('.rightbox3d').animate({ opacity: 1 ,top:"-200px" }, 4000, function() { // animation complete. });

but can't head round it. can help?

so, you're going have make big head leap. css transitions different jquery.animate.

here's intro on matter. https://www.webkit.org/blog/138/

so, first let's recognize can't same things anymore

if (!modernizr.csstransitions || modernizr.csstransforms3d) {    // use css } else {    // use jquery } 

now, let's fill in example

if (!modernizr.csstransitions || !modernizr.csstransforms3d) {   // old jquery version   $('.rightbox3d').animate({     opacity: 1,     top: "-200px",     width: 2 * $('.rightbox3d').width(),     height: 2 * $('.rightbox3d').height()   }, 4000); } else {   // modern cool version   // transform moving/rotating/stretching want   // transition animation want   $('.rightbox3d').css({     opacity: 1,     transform: 'translatey(-200px) scale(2)',     transition: 'all 4000ms ease-in-out'   }); } 

i think should clear you. :)