jQuery hovering a div

Question

I'm fairly new to jQuery and I really can't get my head around this one.

I'm trying to select <a href="contact"><div id="res">Reserveren</div></a>.

This is my jQuery code:

 $(document).ready(function() {

 $('#res').hover(
    function () {
    $(this).animate({backgroundColor: "#fff" });
    },
    function () {
    $(this).animate({backgroundColor: "#000" });
    }

  });

However, nothing is working. It doesn't change anything at all... What am I doing wrong?

Thanks in advance, Bart

You haven't closed the opening bracket after the first .hover, change `}` on the 2nd to laste line to `});` for a start — Andy, Nov 23 '12 at 16:29
Relevant reading: http://stackoverflow.com/questions/1827965/is-putting-a-div-inside-an-anchor-ever-correct — MikeSmithDev, Nov 23 '12 at 16:31

David Thomas · Answer 1 · 2012-11-23T16:37:36.030

7

jQuery doesn't, and can't, animate color without using a suitable plug-in, or the jQuery UI library.

You can, however, take advantage of CSS transitions using class-names:

$('#res').hover(
    function () {
        $(this).addClass('animating');
    },
    function () {
        $(this).removeClass('animating');
    });

With the following CSS:

#res { /* default styles */
    background-color: #000;
    -moz-transition: background-color 1s linear;
    -ms-transition: background-color 1s linear;
    -o-transition: background-color 1s linear;
    -webkit-transition: background-color 1s linear;
    transition: background-color 1s linear;
}

#res.animating, /* hovered-class/animating styles */
.animating {
    background-color: #fff;
    -moz-transition: background-color 1s linear;
    -ms-transition: background-color 1s linear;
    -o-transition: background-color 1s linear;
    -webkit-transition: background-color 1s linear;
    transition: background-color 1s linear;
}

JS Fiddle demo.

edited Nov 23 '12 at 16:37

answered Nov 23 '12 at 16:32

David Thomas

249,100
51
377
410

2

[Yes, it does](http://jsfiddle.net/davidThomas/ZnG8C/). (And, incidentally, you had a syntax-error (unexpected `}`), once *that* was removed it worked.) – David Thomas Nov 23 '12 at 16:37
No, it doesn't. I saw your JS Fiddle demo and I truly appreciate the effort you're putting into this, but on this side it isn't working at all... I probably just don't know enough about html/css/jQuery. Thanks anyway. – cxn Nov 23 '12 at 16:40
Then *show your code*, and we can maybe help you to make it work. – David Thomas Nov 23 '12 at 16:41
I wouldn't even know where to start. This div is located in a sidebar which I included using php on every page. To test this out I only linked to jQuery and javascript file on the index page. I copied all your code and just saved it, it doesn't do anything. – cxn Nov 23 '12 at 16:43
Cause of the changed my div is now stretching full width and it's ugly as hell. I already regret trying jQuery lol. – cxn Nov 23 '12 at 16:45
To be honest, everything I tried with jQuery on my site does not work. Does this have anything to do with including certain part of the site in main files? – cxn Nov 23 '12 at 17:00
No, it shouldn't matter. I suspect it's got more to do with a misunderstanding of jQuery than anything else. Are you including the library properly? – David Thomas Nov 23 '12 at 17:14
is the way I'm including it. – cxn Nov 23 '12 at 17:29

score 4 · Answer 2 · edited Nov 23 '12 at 17:01

there are multiple things wrong with the snippet

the hover function has no closing brace.
backgroundColor is not a property. you would give background-color

color animations are not supported in jquery, please check jquery ui for support on that http://jqueryui.com/animate/

$(document).ready(function() {
     $('#res').hover(
        function () {
            $(this).animate({"font-size": "90px" });
        },
        function () {
            $(this).animate({"font-size" : "12px" });
        }
    );
});

score 0 · Answer 3 · edited Nov 23 '12 at 16:37

0

remove the animate

$('#res').hover(
    function () {
        $(this).css("background","#fff");
    },
    function () {
        $(this).css("background","#000");
    }
);

Even better would be to change the class of the selector

$('#res').hover(
    function () {
        $(this).addClass("on");
    },
    function () {
        $(this).removeClass("on");
    }
);

edited Nov 23 '12 at 16:37

Rory McCrossan

331,213
40
305
339

answered Nov 23 '12 at 16:29

I would actually want the background to change slowly from one color to another. I thought this was possible with the animate function? – cxn Nov 23 '12 at 16:32
Ah yes, it is - David Thomas suggestion is using css3 transitions. – Nov 23 '12 at 16:40

score 0 · Answer 4 · answered Nov 23 '12 at 16:41

$(document).ready(function() {
   $('#res').hover(
    function () {
        $(this).css('background-color' ,'#fff');
    },
    function () {
      $(this).css('background-color' ,'#000');
  })
});

or use this plugin: http://www.bitstorm.org/jquery/color-animation/

jQuery hovering a div

4 Answers4