CSS和JavaScript问题

Question

抱歉我的英文。

我的一位朋友让我帮他建立一个HTML页面。我只知道一点CSS，并且对JavaScript或jQuery一无所知。我写的所有代码都来自谷歌。

你可以在图片中得到我真正想要的东西，我刚刚完成第一步，翻转动画现在可以使用，你可以在这里下载zip文件（http://www.hitbang.cn/stackoverflow.zip）。

但是我不能同时为文本的颜色设置动画，图片和文本的布局是我需要你帮助克服的第二个问题，CSS布局太复杂了！

以下是我的代码的一部分，您可以下载整个代码，如果您帮我纠正我的代码，您可以给我发电子邮件。

<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

我认为你不能用jQuery动画颜色。你需要一个像jQuery UI这样的插件。然后你可以做这样的事情：

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