CODEWITHSUNDEEP
jquerycss
cnotethegr8
cnotethegr8

Reputation: 7510

Slowly animate button on fade with jQuery

I have an input button that has an image from css. The image from the css changes its background-position when the input button is hovered or clicked on.

For instance.

input { height: 50px; width: 100px; background-position: 0 0; }
input:hover { background-position: 0 -60px; }
input:active { background-position: 0 -120px; }

How can i use jQuery to make the transition a slow-smooth fade, instead of an automatic change?

Upvotes: 2

Views: 1012

Answers (4)

KyleWpppd
KyleWpppd

Reputation: 2030

Instead of using CSS, bind jQuery's fadeTo() to the click/hover events as necessary.

You can also take a look at the related functions, fadeIn(), fadeOut(), and fadeToggle().

$('input').hover( function(){ 
    $(this).fadeTo('slow', 0.75);
},
function(){ 
    $(this).fadeTo('slow', 1.0);
});

http://api.jquery.com/category/effects/fading/

Upvotes: 1

Christopher Will
Christopher Will

Reputation: 3064

Have a look at the animate function.

Just an example:

$('#myElement')
    .css( {backgroundPosition: "0 0"} )
    .mouseover(function(){
        $(this).stop().animate(
            {backgroundPosition:"(0 -150px)"}, 
            {duration:200})
        })
    .mouseout(function(){
        $(this).stop().animate(
            {backgroundPosition:"(0 0)"}, 
            {duration:200})
        })

EDIT:

Of course you have to add the onClick-event as well.

Upvotes: 1

ShankarSangoli
ShankarSangoli

Reputation: 69915

Take a look at this

http://www.protofunc.com/scripts/jquery/backgroundPosition/

Upvotes: 0

Jason Gennaro
Jason Gennaro

Reputation: 34855

You could try this plugin: http://plugins.jquery.com/project/bgImageTransition

Upvotes: 0

Related Questions