Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery animate, doesn't animate

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!

like image 702
dzm Avatar asked Jul 20 '11 20:07

dzm


People also ask

Is jQuery slower for animations?

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.

What does jQuery animate do?

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.

How you can use jQuery to animate a flash to the button?

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).

Can the animate () method be used to animate any CSS property?

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").


1 Answers

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/

like image 127
AlienWebguy Avatar answered Sep 18 '22 12:09

AlienWebguy