how to use css3 transitions with jquery animate?

Question

i have this carousel from here and i am trying to add some css3 transform options to it.

more exactly:

-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(45deg);

in the javascript i have

if (newPosition == 1) {
    new_width = pluginData.largeFeatureWidth;
    new_height = pluginData.largeFeatureHeight;
    new_top = options.topPadding;
    new_zindex = $feature.css("z-index");
    new_fade = 1.0;
  } else {
    new_width = pluginData.smallFeatureWidth;
    new_height = pluginData.smallFeatureHeight;
    new_top = options.smallFeatureOffset + options.topPadding;
    new_zindex = 1;
    new_fade = 0.4;
  }

and the animate function runs here

 .animate(
      {
        width: new_width,
        height: new_height,
        top: new_top,
        left: new_left,
        opacity: new_fade
      }

the generated css is:

element.style {
    width: 225px;
    height: 115px;
    top: 70px;
    left: 50px;
    opacity: 0.4;
    z-index: 1;
}

now, all this vars are being calculated by this plugin, and i am only interested in adding the transform options to this animate function, something like this:

....
} else {
    new_width = pluginData.smallFeatureWidth;
    new_height = pluginData.smallFeatureHeight;
    new_top = options.smallFeatureOffset + options.topPadding;
    new_zindex = 1;
    new_fade = 0.4;
    new_transform_style = 'preserve-3d';
    new_transform = 'rotateY(45deg)';
}

and

.animate(
      {
        width: new_width,
        height: new_height,
        top: new_top,
        left: new_left,
        opacity: new_fade,
        transform_style = new_transform_style;
        transform = new_transform;
      }

but im not sure that those are the right style notations for animate

any ideas?

thanks

The jQuery Animation library is not powered by CSS3 transforms, it's strictly JavaScript-based. — qJake
– qJake, Commented Apr 12, 2012 at 21:09

Jonny Burger · Accepted Answer · 2012-04-12 21:09:00Z

2

You can't animate rotation/scale in jQuery by default.

But there is a plugin which fixes this:

Animate Rotation and Scale in CSS

answered Apr 12, 2012 at 21:09

Jonny Burger

9114 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:21:30Z

0

You can use a custom property with .animate() and perform the transformation "manually" using the step function.

See this SO answer of me for more details.

edited May 23, 2017 at 12:21

CommunityBot

11 silver badge

answered Feb 16, 2014 at 20:34

Ignitor

3,0851 gold badge36 silver badges52 bronze badges

Collectives™ on Stack Overflow

how to use css3 transitions with jquery animate?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related