jQuery / Velocity delaying a single parameter?

red_ice

Hey,

Just wondering if anyone has had any luck animating multiple parameters in a single function?

So, if I'm animating the height and width of a box from 100px x 100px to 1000px x 1000px

for example, standard code would be...

$( ".highlight" ).velocity({
	 height: "1000px",
	right: "1000px"
}, {
	duration: 1000,
	easing: "easeOutQuad"
});

I COULD, stack it in a call back, however that would just fire off a single animation to animate the height, then instantly animate the next parameter - the width.

I want to animate height, and 500ms into the 1000ms animation start off the width animating.

I've a feeling its something really simple..

Thanks

Giblet

Use CSS!

.highlight {
    transition:height cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s, right cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s, width 500ms cubic-bezier(0.250, 0.460, 0.450, 0.940) 500ms;     
}
.highlight.active { height:1000px; right:1000px; width:1000px; }

As long as a default height, width and right are defined, changing their values will animate as above by adding the class active to the element with javascript. Width has a transition delay of 500ms as well.
cubic-bezier(0.250, 0.460, 0.450, 0.940) is the same as ease-out-quad.

red_ice

Giblet wrote: »

Use CSS!

.highlight {
    transition:height cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s, right cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s, width 500ms cubic-bezier(0.250, 0.460, 0.450, 0.940) 500ms;     
}
.highlight.active { height:1000px; right:1000px; width:1000px; }

As long as a default height, width and right are defined, changing their values will animate as above by adding the class active to the element with javascript. Width has a transition delay of 500ms as well.
cubic-bezier(0.250, 0.460, 0.450, 0.940) is the same as ease-out-quad.

I cant use CSS transitions because I'm making it compatible with ie8/9. The function is actually for animating an underline, and I need to calculate the innerwidth / margin left to animate it to a certain position. I've just settled for 2 separate animations in the end. Although I would much rather I didnt have to!

Talisman

red_ice wrote: »

I've a feeling its something really simple..

Have you considered splitting the animation into two parts and chaining them? It would also allow you to change the easing function for the different parts of the animation.

$( ".highlight" )
  .velocity(
    { height: "600px" }, 
    { duration: 500, easing: "easeOutQuad" }
  )
  .velocity(
    { height: "1000px", right: "1000px"}, 
    { duration: 500, easing: "easeInQuad" }
  );

red_ice

Talisman wrote: »

Have you considered splitting the animation into two parts and chaining them? It would also allow you to change the easing function for the different parts of the animation.

Yea I have, but it doesn't give the desired effect I'm looking for. I got close to what I was looking for by adding some easing to it in the end. It seems to be a bit of a shame that in this day and age we cant trigger other animations half way through a current animation with JS doesn't it?