fade css background images on hover

Question

$(function(){
    $('#product .btn-purchase')
            .mouseover(function(){
                $(this).stop().animate($(this).addClass('.btn-purchase-hover'), {duration:500})
            })
            .mouseout(function(){
                $(this).stop().animate($(this).removeClass('.btn-purchase-hover'), {duration:500})
    });
});

.. not sure why this isn't work, what am I doing wrong?

Why don't you use the `:hover` pseudo-class? You can't animate class addition with javascript. — John Dvorak, Mar 03 '13 at 20:08

score 1 · Answer 1 · edited May 23 '17 at 11:43

The animate function predominately works on a numeric CSS property.

for details you can look here : http://api.jquery.com/animate/

EDIT: I would suggest that you use the fadeIn / out method in jQuery instead. For instance , you could do something like this below. ( Code off the top of my head, assumes you have the div with the correct image after the .btn-purchase )

$(function(){
    $('#product .btn-purchase')
            .mouseover(function(){
                var $this = $(this);
                  $this.fadeOut(function(){ $this.next().fadeIn(); });
            })
            .mouseout(function(){
                  $this.fadeOut(function(){ $this.prev().fadeIn(); });
    });
});

I would also like to add that incase you are not supporting IE, then using CSS transitions may be of help.

Have a look at this answer animating addClass/removeClass with jquery since it is definately a better / more efficient method in my opinion

Shreyas N

score 0 · Answer 2 · answered Mar 03 '13 at 20:05

0

You need to use document.ready so your code runs after the DOM has completely loaded, something like this :

$(document).ready(function() {
    $('#product .btn-purchase')
            .mouseover(function(){
                $(this).stop().animate($(this).addClass('.btn-purchase-hover'), {duration:500})
            })
            .mouseout(function(){
                $(this).stop().animate($(this).removeClass('.btn-purchase-hover'), {duration:500})
    });
});

answered Mar 03 '13 at 20:05

Axel

361
2
6

2

`$(func)` is an alias of `$(document).ready(func)`. He's already waiting for document.ready – John Dvorak Mar 03 '13 at 20:07
Passing a function to $() essentially does the same thing. – Harsha Ivaturi Mar 03 '13 at 20:08
Note that most still prefer the longer version for readability. – John Dvorak Mar 03 '13 at 20:10
true, but knowing that maybe I'll sacrifice some readability hehe – Axel Mar 03 '13 at 20:12

score 0 · Answer 3 · edited May 23 '17 at 10:25

0

JQuery animate is used to animate CSS properties and not classes. As this answer shows, a better way might be to use CSS transitions (if you're only supporting CSS3). Alternatively, if you want to animate lots of things you'll need to supply them as CSS properties in the .animation() method.

Hope that solves you're issue.

edited May 23 '17 at 10:25

Community

1
1

answered Mar 03 '13 at 20:12

Gary Stevens

693
8
20

score 0 · Accepted Answer · answered Mar 03 '13 at 20:51

I know, that this is not exactly an answer to your question. But as Jan commented before, you might think about implementing this in css.

Just to give you an idea what it might look like:

 #product .btn-purchase{
     background-color: blue;
     transition: all 1s ease-in;
     -webkit-transition: all 1s ease-in;
     -moz-transition: all 1s ease-in;
 }


 #product .btn-purchase:hover{
     background-color:  red;
 }

fade css background images on hover

4 Answers4