0

basically I'm trying to have an image fade to a color when the mouse hovers over it and turn back into the image when the mouse leaves. However, right now nothing happens at all. Here is my jquery ui code:

$(document).ready(function(){
    $(".tilesetsmall").mouseover(function() {
         $(this).animate({ backgroundColor:'#DEA8E0'},1000);
    }).mouseout(function() {
        $(this).animate({ backgroundColor:'#FF0000'},1000);
    });       
});

.tilesetsmall is the class of an image. I'm using this for the source of jquery ui:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>

Any help would be awesome and much appreciated

nachime
  • 1,826
  • 4
  • 16
  • 25

1 Answers1

0

Change your backgroundColor to background-color, then it should works..

As you can read from the documentation, and backgroundColor is not the right CSS properties..

.animate()
Perform a custom animation of a set of CSS properties

TESTED:

It seems there is a bug in the jQuery UI Animate backgroundColor, so instead of using that use jQuery.Color..

Check out this working JSFiddle... Hope it helps..

Bla...
  • 7,228
  • 7
  • 27
  • 46