I'm using the animate() function to change the background position of a button on hover, the problem is that instead of 'animating' it just waits the duration (500) and flicks to the new background position - without a smooth transition.
$('.confirm').hover(function() {
$(this).animate({backgroundPosition: '0, -40px'});
}, function() {
$(this).animate({backgroundPosition: '0, 0'});
});
That's the JS I'm using. Any ideas why it's not doing a smooth transition? It's acting like a timeout. I have both jQuery and UI defined.
Thanks!
jQuery can be several times slower than CSS when talking about animations. CSS animations and transitions have the advantage of being hardware accelerated by the GPU, which is really good in moving pixels.
The jQuery animate() method is used to create custom animations. Syntax: $(selector).animate({params},speed,callback); The required params parameter defines the CSS properties to be animated.
The solution to Jquery To Animate A Flash To The Button Selected will be demonstrated using examples in this article. $("#someElement"). fadeOut(100). fadeIn(100).
The animate() method performs a custom animation of a set of CSS properties. This method changes an element from one state to another with CSS styles. The CSS property value is changed gradually, to create an animated effect. Only numeric values can be animated (like "margin:30px").
You can't natively animate a background position. Animation properties expect a single value, like opacity:1
, left:'50px'
, etc.
This plugin should add the functionality you need: http://www.protofunc.com/scripts/jquery/backgroundPosition/
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