jquery animate/mouseover/mouseout not working

Question

When I hover over the element with a class of 'spring' I want it to transition to another colour. I'm doing this using jQuery but I can't seem to get it working. Would anyone be able to shed some light on this for me? Here is a fiddle for what I have so far...

jsfiddle

Thanks in advance!

$('.spring').mouseover(function () {
    $('.spring').animate({
        'backgroundColor' : '#CCCCCC'
    }).mouseout(function () {
    $('.spring').animate({
        'backgroundColor' : '#000000'
    });
});

This is the code I have so far for the jQuery!

your jsfiddle has errors, here is an updated one (not doing what you want yet) http://jsfiddle.net/3f4RQ/2/ — Sam Battat, Feb 18 '14 at 22:50

score 0 · Answer 1 · answered Feb 18 '14 at 22:50

0

Try to use hover for this:

$('.spring').hover(function () {
    $('.spring').animate({
        'backgroundColor' : '#CCCCCC'
    });
}, function () {
    $('.spring').animate({
        'backgroundColor' : '#000000'
    });
});

answered Feb 18 '14 at 22:50

Maksim Gladkov

3,051
1
14
16

score 0 · Answer 2 · answered Feb 18 '14 at 22:53

$(document).ready(function () {
    $('.spring').hover(function () {
        $('.spring').animate($(this).css({
            'background': '#CCCCCC'
        }));
    }, function () {
        $('.spring').animate($(this).css({
            'background': '#000000'
        }));
    });
});

http://jsfiddle.net/3f4RQ/5/

Ananthan Unni · Answer 3 · 2014-02-18T22:58:35.510

I have modified your Fiddle

http://jsfiddle.net/3f4RQ/3/

$(document).ready(function () {

    $('.spring').hover(function () {
        $('.spring').animate({
            'backgroundColor': '#CCCCCC'
        })
    },

    function () {
        $('.spring').animate({
            'backgroundColor': '#000000'
        });
    });
});

If you still need the mouseover and mouseout events, then you can use the below snippet. $(document).ready(function () {

 $('.spring').mouseover(function () {
        $('.spring').animate({
            'backgroundColor': '#CCCCCC'
        })
    })
.mouseout(
    function () {
        $('.spring').animate({
            'backgroundColor': '#000000'
        });
    });
});

Additionally you will need Jquery UI to animate backgroundColor property.

Please mark as answer if it helped.

nwalton · Answer 4 · 2014-02-18T23:31:12.273

If I understand correctly, you want the box to be red until someone hovers, then turn gray on hover, and then become black instead of red.

I prefer to let CSS do as much of the work as possible, since it often processes faster and is easier to work with, especially for something so simple. CSS animations can replace the jQuery animate function in most cases. jQuery is needed only to set a flag that the box has been hovered, and then isn't really needed after that.

jQuery:

I use the updated "on" function for the mouseover, so you can easily turn it off when it's not needed. This basically sets a class on the box the first time it's hovered.

$(document).ready(function () {

    $('.spring').on('mouseover', function () {
        $('.spring')
         .addClass('touched')
         .off('mouseover');
    });

});

CSS:

I find that animations are smoother and allow finer control with CSS transitions rather than jQuery animate. We set the hover state to gray, and the .hovered class to black, and everything's right there in the CSS.

.spring {
    background: red;
    width: 100px;
    height: 30px;
    transition: background 0.5s ease
}
.spring:hover, .spring.touched:hover {
    background: #ccc;
}
.spring.touched {
    background: #000;
}

This gives you easy control over every aspect of the appearance, without having to add cumbersome css code into the jQuery.

See the Fiddle here

Only one gotcha—before you use it, check the table for CSS animation support: http://caniuse.com/css-animation . I usually consider transitions a "nice to have" item rather than an essential, so I'm not too worried that IE9 and below won't see the transitions. They still get the color changes just fine, so there's really no functionality lost. The advantage of not having all that junk in the javascript is worth it.

You put across a compelling point about transitions, which I understand perfectly fine. I would like to do transitions and rule out developing for IE8 and below all together! However, as this website is for a primary school whom still use IE8 which teaches the kids about the differences of seasons and why they act the way they do. Everything has to work PERFECT in IE8 (damn schools and their IE8) — user3263978, Feb 19 '14 at 00:10
Definitely understandable. That's why I put the caveat at the end. It looks like there may be a workable [polyfill](http://stackoverflow.com/questions/6974648/css3-transition-polyfill) for transitions, but it might also make sense to stick with jQuery. — nwalton, Feb 19 '14 at 06:25

jquery animate/mouseover/mouseout not working

4 Answers4