Menu
I want to do something like -moz-transition effect that give me a animated rotate picture. or move a picture from bottom of it's wrapper to top of it.
for clarify how I want just take a look at This Link and see the four pictures that are under slider.
It uses -moz-transition CSS3 effect but I want to have something with js or jQuery to animate it even in IE.
Is there any plugin for it?
Thanks alot
388
The solution is actually quite simple using JavaScript. To trigger an element's transition, toggle a class name on that element that triggers it. To pause an element's transition, use getComputedStyle and getPropertyValue at the point in the transition you want to pause it.
Definition and Usage. The transition property is a shorthand property for the four transition properties: transitionProperty, transitionDuration, transitionTimingFunction, and transitionDelay. Note: Always specify the transitionDuration property, otherwise the duration is 0, and the transition will have no effect.
CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time.
Triggering transitions You can trigger CSS transitions directly with pseudo classes like :hover (activates when the mouse goes over an element), :focus (activates when a user tabs onto an element, or when a user clicks into an input element), or :active (activates when user clicks on the element).
jQuery's .animate() will do this in a cross-browser way.
$( '.button' ).animate( { top: '-=50' }, 400 );
This tutorial seems to perfectly fit to your needs.
36
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
