how to add speed to .css() in jquery

[amis]

Hey guys

How can i make speed of change like “slow” working in

$("id").hover(function(){

.css({ "background":"url(.jpg)"},"slow")

});

I add it but not working …

[Mottie]

You can’t set a time for the css function. If you want to animate something you’ll have to use animate or one of the other built in functions like fadeIn, fadeOut, fadeTo, hide, show, slideDown, etc.

What exactly are you trying to do? It might be possible to use CSS3 transitions to animate something, depending on what it is.

[amis]

I want when i hover image , another image appear but by something like fading or animation when change

[mattgoucher]

This can be accomplished using the hover method. Nothing crazy going on here, when the user hovers over any div with a class of hover. I’m using a data attribute on each div to ‘store’ the next background. If there is no background, nothing will happen.

I also made a visual for ye.

http://jsfiddle.net/mattgoucher/6tpC4/6/

Let me know if you need any further help.

Matt.

$(document).ready(function(){

$('.hover').hover(

function(){

// On Mouse On

var background = $(this).attr('data-background');

if ( !background ) { return; }

$(this)

.css('background','url(' + background + ')')

.children('img')

.fadeOut('fast');

},

function(){

// On Mouse Off

$(this)

.children('img')

.fadeIn('fast');

}

);

});

[amis]

thx for helping me , u are gr8

can u explain this line plz as i am beginner in jQuery

 if ( !background ) { return; } 

and can i use this for unorder list as i will use it for navbar buttons

[mattgoucher]

The concept can be used easily for any type of hover.

As for the if statement, it would help if you read it out loud.

if Not background, return.

Which means, if the background variable does not exist (or is empty) the script will return false.

Also, Like Mottie was saying above. If its for somthing like a navigation bar, you may be able to sneak past with a little css3 transition. Somthing like;

#myID {

-webkit-transition: background 1s ease-out;

-moz-transition: background 1s ease-out;

-o-transition: background 1s ease-out;

transition: background 1s ease-out;

}

[Author]

Posts