CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-animate
Fran
Fran

Reputation: 57

Jquery Animate does not work for me

I created this code for animate background mouseover, but it does not work, only changes the background for the other but does not show effects when I use function animate: 

$(".b_header").mouseover(function() {

$(this).css("background-image","url(images/bot/head_down.png)");



/*

Also I've tried other effects and nothing 

$(this).css( {backgroundPosition: "0 0"} );


$(this).animate(
{backgroundPosition:"(-20px -53px)"}, 
{duration:500});
*/

$(this).animate({ opacity: 5 }, 3000);

});

Upvotes: 0

Views: 1336

Answers (2)

AbdullahDiaa
AbdullahDiaa

Reputation: 1336

first of all , make sure you've used document.ready

$(document).ready(function() {
     ......
     $(this).animate({ opacity: 1 }, 3000);
});

second , in your CSS files make sure u set cross-browser opacity attribute 

opacity: 0; /* Chrome 4+, FF2+, Saf3.1+, Opera 9+, IE9, iOS 3.2+, Android 2.1+ */
filter: alpha(opacity=0); /* IE6-IE8 */

finally , opacity value range from 0 (hidden) to 1 (opaque) , there's NO 5 value but it'll work fine as if it's 1

and here's a working example => http://jsfiddle.net/abdullahdiaa/PxGwz/

Upvotes: 4

jfriend00
jfriend00

Reputation: 708016

jQuery's animate function does not work with CSS properties that take multiple values. You can usually separately animate each individual value. So, that would explain why trying to animate both values of background-position won't work.

From the jQuery doc for .animate():

All animated properties should be animated to a single numeric value,

For animating opacity, it takes values from 0 to 1, not a value of 5 and to see an animation work with opacity, the object would have to start at a different opacity than you are animating to.

Here's a working example of animating opacity: http://jsfiddle.net/jfriend00/zCL7S/

Upvotes: 1

Related Questions