0

Possible Duplicate:
jQuery animate backgroundColor
Changing the background color of a <div> section

I have the following code trying to change the background color of a text after pressing a button. The case is that it is not doing what it is intended to do. Why is that? What is going wrong here.

HTML code

<html>
<head>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<style type="text/css"> 
#name{
background-color: #FFFFF2;
width: 100px;
}
</style>
</head>
<body>
<input type="button" id="bgcolor" value="Change color"/>
<div id="name">
Abder-Rahman
</body>
</div>
</html>

script.js

$("#bgcolor").click(function(){
    $("#name").animate(
        {backgroundColor: '#8B008B'},
        "fast");}
);

EDIT

I want to notice that I have a folder called: jquery-ui-1.8.16.custom, and this is where I'm putting these files in. And, I have referenced jquery-1.6.4,js as shown above which I also have it in the same folder, in addition to referencing jquery-ui-1.8.16.custom.min.js which is in the js folder in the current folder.

What am I getting wrong here? Isn't this the way to reference jQuery and jQueryUI?

Browser used: Mozilla Firefox 6.0.2

Folder structure:

jquery-ui-1.8.16.custom/abc.html

jquery-ui-1.8.16.custom/script.js

jquery-ui-1.8.16.custom/jquery-1.6.4.js

jquery-ui-1.8.16.custom/js/jquery-ui-1.8.16.custom.min.js

Thanks.

Community
  • 1
  • 1
Simplicity
  • 47,404
  • 98
  • 256
  • 385
  • 3
    Why are you including jQuery twice? – Tarek Fadel Oct 02 '11 at 08:04
  • [It works here](http://jsfiddle.net/Shef/BcGTg/). Maybe it's because you have the closing tags wrong? That is, `

    ` instead of ``?

     – Shef Oct 02 '11 at 08:04
  • I just popped that into a jsfiddle, and it seems to have worked. http://jsfiddle.net/PGHHt/ Maybe try getting rid of the second jquery include? Or maybe some of those files don't exist? – evan Oct 02 '11 at 08:06

2 Answers2

1
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>

Are the references point correct path? It is working on jsfiddle after removing the references.

denolk
  • 765
  • 14
  • 27
-1

Despite the fact that (sorry) your code looks horrible (wrong order of html tags, you include jquery twice, ...) animate() doesn't work with backgroundColor out of the box and you will need the color plugin. mu is too short posted a link to a related thread in his comment on your post.

janoliver
  • 7,744
  • 14
  • 60
  • 103