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).

alt text

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;}

Hey, don't put yourself down, your English wasn't that bad! ;) — Yi Jiang
– Yi Jiang, Commented Sep 7, 2010 at 5:05
I've certainly read a lot worse :) From native English speakers as well :P — Alastair Pitts
– Alastair Pitts, Commented Sep 7, 2010 at 5:10

Chris · Accepted Answer · 2010-09-07 05:15:39Z

3

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})

answered Sep 7, 2010 at 5:15

Chris

4,4711 gold badge30 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ertao Over a year ago

The code I posted works , I just don't know how to make the text animate the color while the background is changing.

Chris Over a year ago

Right, and in order to animate the text color, you need more than just jQuery. If you were to also include jQuery UI, you'd be able to add the color property to your animate object like in the code I posted.

Collectives™ on Stack Overflow

CSS and JavaScript problem

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related