CSS and JavaScript problem.

Question

Sorry for my English.

A friend of mine asked me to help him to build a HTML page. I just know a little bit of CSS, and know absolutely nothing about JavaScript or jQuery. All the code I wrote was from Google.

You can get what I really want in the picture, and I just finish the first step, the rollover animation works now, you can download the zip file here(http://www.hitbang.cn/stackoverflow.zip).

But I can't animate the color of the text at the same time ,and the picture and text's layout is the second problem that I need your help to overcome, CSS layout is so complicated!

Here is part of my code ,and you can download the whole code, if you help me correct my code, you can email me.

<div id="rightsidebar">
 <div id="yuepingTitle">
 </div>

 <div id="reviewContent">
  <ul id="reviewList">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">7</a></li>
  </ul>
 </div>
</div>

Javascript

$(function(){
$('#reviewList a')
  .css( {backgroundPosition: "0px 0px"} )
  .mouseover(function(){
   $(this).stop().animate({backgroundPosition:"(0px -692px)"}, {duration:300})
  })
  .mouseout(function(){
   $(this).stop().animate({backgroundPosition:"(0px 0px)"}, {duration:200, complete:function(){
    $(this).css({backgroundPosition: "0px 0px"})
   }})
  })
});

CSS:

ul#reviewList {list-style:none;margin:0 ;padding:18px 0px 0px 6px;}

ul#reviewList li {width:266px;float:left;margin:0px 0px 1px 0px;padding:0;}

ul#reviewList li a {display:block;height:106px;color:#FFF;text-decoration:none;}

ul#reviewList a {background:url(img/1.jpg) no-repeat 0px 0px;}

Answer 1

I don't think you can animate colors with just jQuery. You need a plugin like jQuery UI. Then you can do something like this:

$(this).stop().animate({backgroundPosition:"(0px -692px)", color: "#123456"}, {duration:300})