Menu
I am using jQuery animate together with CSS3 transition.
The problem is I couldn't find an equivalent smoothing animation. Is there any?
The closest I got is this (jQuery easeOutQuad and CSS3 default easing).
CSS:
#div1 { transition: width 0.5s; }
jQuery:
$('#div2').animate({'width': 200}, 500, 'easeOutQuad');
http://jsfiddle.net/bzw4q/
But they are still different.
I want both to animate together at the same time (using any good easing algorithm). Is that possible?
818
ease-in - specifies a transition effect with a slow start. ease-out - specifies a transition effect with a slow end. ease-in-out - specifies a transition effect with a slow start and end.
In classic animation, the term for motion that starts slowly and accelerates is "slow in," and for motion that starts quickly and decelerates is "slow out." The terminology most commonly used on the web for these are “ease in” and “ease out,” respectively.
To pause an element's transition, use getComputedStyle and getPropertyValue at the point in the transition you want to pause it. Then set those CSS properties of that element equal to those values you just got.
Try with swing and ease-in-out > http://jsfiddle.net/et6Hg/
I think you have better chances :)
187
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
