CSS和JavaScript问题

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

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

alt text

但我不能在同一时间动画文本的颜色，画面和文字的布局是，我需要你的帮助，克服了第二个问题，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;}

来源

2010-09-07 ertao

嘿，不要让自己失望，你的英语不是那么糟！ ;） – 2010-09-07 05:05:32

我当然读了很多:)来自母语为英语的人：P – 2010-09-07 05:10:29

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

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

来源

2010-09-07 05:15:39 Chris

我发布的代码作品，我只是不知道如何在背景变化时使文本变为动画颜色。 – ertao 2010-09-07 07:19:52

对，为了动态显示文字颜色，您不仅需要jQuery。如果您还包含jQuery UI，则可以像在我发布的代码中一样将'color'属性添加到您的动画对象中。 – Chris 2010-09-08 20:20:20

CSS和JavaScript问题

回答

相关问题