ansaurus

Question

Answer 1

+4 A:

Javascript should be this

$(document).ready(function(){
        $("div").hover(function() {
            $(this).css('background-color' , 'yellow');
        });
});

and if you want the button to go back to #333 when going out of the button you can use:

$(document).ready(function(){
    $("div").hover(function() {
            $(this).css('background-color' , 'yellow');

    }, function(){
        $(this).css('background-color' , '#333');
    });

EDIT to include animation

This should animate the background color

$(document).ready(function(){
    $("div").hover(function() {
            $(this).animate({backgroundColor: 'yellow'}, 1000);
    }, function(){
        $(this).animate({backgroundColor: '#333'}, 1000);
    });

The 1000 is how long you want the animation to take

T B 2009-08-19 18:59:52

}); should not be there after the first function :) besides that a good answer

Pawel Krakowiak 2009-08-19 19:05:17

That fixes my problem! I knew I overlooked something somewhere :)How would I animate the background-color property?

TK Kocheran 2009-08-19 19:14:59

I added more code for the animation

T B 2009-08-19 19:27:17

Perfect, thanks a lot for your help. Do you know any way of animating an element's CSS class? I want to define css types and have JQuery animate between them. Is that possible? eg: animate({"class":"defaultState"}, 400);

TK Kocheran 2009-08-19 19:34:57

I don't think you can do that with the animate() method, but jQueryUI has a switchClas() method that does what you want. http://jqueryui.com/demos/switchClass/

T B 2009-08-19 21:34:38

Answer 2

+1 A:

It appears you're missing the standard jQuery "wait for page ready" function around your code.

 $(document).ready(function(){
   // Your code here
 });

and you only need the {} in your css function if you are modifying more than one key/value pair.

jjclarkson 2009-08-19 19:00:09

Answer 3

+1 A:

Hover function takes two parameters:

        $("div").hover(function() {
            $(this).css({'background-color' : 'yellow'}); //mouse in
        }, function(){
           $(this).css({'background-color' : 'green'});}); //mouse out

here you can find more details.

Artem Barger 2009-08-19 19:01:18

Answer 4

+1 A:

First, I would use a <button> tag rather than a division tag with a paragraph element inside of it. The <button> tag is more suffice in what you are actually trying to do.

Second, you are using the jQuery .css function incorrectly. According to the jQuery CSS Documents, the script should be like so:

jQuery(document).ready(function($) {
    $("#mainButton").hover(
     // On hover over
     function() {
      $(this).css(background - color ', '#FF0 ');
     }, 

     // On hover out
     function() {
      $(this).css(background-color', '#333');
     }
    );
});

karbassi 2009-08-19 19:02:56

+1 Good point to use the `button` element

Marve 2009-08-19 19:17:29

Answer 5

+1 A:

To add to the existing answers, your solution isn't working simply because the element isn't in the DOM to even bind the event to it yet. The suggestions use the:

 $(document).ready(fn)

syntax as described here to ensure that the DOM is fully loaded before binding events.

Marc 2009-08-19 19:05:21

Answer 6

A:

You are missing the $(document).ready(function() { }) and you are using css function wrong.

$(document).ready(function(){

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

                $(this).css('background-color','yellow');
            });
      });

Daniel Moura 2009-08-19 19:05:57

Answer 7

+1 A:

You don't need jQuery to do this, though. You could easily achieve this via some pseudo class selectors with css.

DIV#mainButton:hover
{
   background-color: #ffo;
}

DIV#mainButton
{
   background-color: #333;
}

MacAnthony 2009-08-19 19:06:09

Answer 8

A:

A couple of syntax errors and a missing ready()...

<script type="text/javascript">
    $(document).ready(function() {

        $("div").hover(function() {
            $(this).css('background-color', 'yellow');
        });
    });
</script>

Scott 2009-08-19 19:08:19

ansaurus

tags:

views:

answers:

JQuery - Animate a Button

related questions