Question

Is it possible to fade animate all css properties of one style with jQuery when hovering? And I mean if you have defined a style and its :hover state only with css, the script to do the rest. Example:

.button1 {
background: url(img1.jpg) repeat-x top left;
color: #000;
}
.button1:hover {
background: url(img2.jpg) repeat-x top left;
color: #F00;
}

And if you want the jQuery script to do the same to many similar buttons, is it possible? Or the only way is to define two different css styles?

Answer 1

You could replace your hover css with a class and use the jquery UI ToggleClass animation:

css:

.button1:hover,
.button1_hover_class {
  background: url(img2.jpg) repeat-x top left;
  color: #F00;
}

javascript:

$(".button1").hover(function() {
    $(this).toggleClass("button1_hover_class", 1000);
    return false;
});

If you want to use both the css hover and the javascript hover, I guess you will have to cancel the default action in the javascript hover function.

Edit: To answer your other question, the javascript above will be applied to all buttons with the .button1 class but if you would like to add it to .button2 too, you can use for example:

$(".button1, .button2").hover(function() {