эффект при наведении

[tina]

всем здрасьте.

помогите пожалуйста, а то мозг уже кипит, пыталась в форуме искать, все равно не получилось(

вот задача моя:
имеется блок li в цсс заданы параметры и фон в файле left.gif, у него в цсс li:hover () происходит смена фона back..-position:-100px 0;

нужно сделать плавную смену фона
вариант который у меня заработал такой:
$('li).hover(
function(){

$('li').fadeOut(0);
$('li').fadeIn(400);
}
);

сменяется и вроде плавно НО МЕРЦАЕТ
помогите и зараннее спасибо!

[Margarita]

http://jquery-docs.ru/Effects/animate/

[tina]

Маргарита, спасибо за наводку, но я пыталась всякими фейдами и анимейт тоже, так как плохо понимаю в технологии наверно у меня и не получилось ведь пыталась несколько раз в том числе с анимейт (

[cmd]

нужно сделать плавную смену фона

см. CSS3 Transitions
http://habrahabr.ru/post/111658/
http://www.w3schools.com/css3/css3_transitions.asp

[tina]

cmd, благодарю, но не подойдет использование доп фишек, так как именно надо функциями jquery, завтра в универе сдавать, а я просто в ауте, люди добрые спасите меня!

[cmd]

tina, так это Ваша профессия? Теперь помогать не буду - учиться надо нормально. Устройте коллоквиум, поговорите с одногруппниками (чай, не Вам одной поставили такую задачу)

[tina]

нет, экономист, но пол года у нас комп науки
на свежу голову с утра все на том же месте стою

[tina]

не могу применить функцию animate

[tina]

фух - сказали завтра принести

вот мой код

.about li {
width:335px;
height:323px;
float:left;
margin-right:1px;
position:relative;
background: url('../images/about.png') no-repeat 0 0;
}
.about li:hover {
background-position: -350px 10px;
width:370px;
height:333px;
margin:-10px -16px 0 -18px;
z-index:100;
}

<ul class="about">
<li><div class="title">Заголовок 1</div><div class="text">Любой текст в блоке li текст в блоке li текст в блоке li текст в блоке li текст в блоке li</div></li>
<li><div class="title">Заголовок 2</div><div class="text">Любой текст в блоке li текст в блоке li текст в блоке li текст в блоке li текст в блоке li</div></li>
<li><div class="title">Заголовок 3</div><div class="text">Любой текст в блоке li текст в блоке li текст в блоке li текст в блоке li текст в блоке li</div></li>
</ul>


$(document).ready(function(){
$('.about li').hover(
function(){
$('.about li').fadeOut(0);
$('.about li').fadeIn(400);
}
);
});

Мерцает ( а должно быть плавно

[zebra]

$('.about li').fadeOut(0);
$('.about li').fadeIn(400);

Замените на

$('.about li').fadeOut(0, function() {
     $(this).fadeIn(400);
});

Может прокатит