Блог

Извините за мой английский.

Мой друг попросил меня помочь ему создать HTML-страницу. Я просто немного разбираюсь в CSS и абсолютно ничего не знаю о JavaScript или jQuery. Весь код, который я написал, был взят из Google.

Вы можете получить то, что я действительно хочу на картинке, и я только что закончил первый шаг, анимация ролловера теперь работает, вы можете загрузить 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;}
  

Я не думаю, что вы можете анимировать цвета только с помощью jQuery. Вам нужен плагин, подобный jQuery UI. Тогда вы можете сделать что-то вроде этого:

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