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

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

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

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

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

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

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

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

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

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

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

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

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

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

вот мой код

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

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

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

Замените на

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

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

эх не прокатило - обычный цсс при ховере работает

Создайте работающий пример, на котором видна проблема. Выложите на jsfiddle.com или сюда.

файл html, css, image, js? а как сюда выложить? объясните плиз подробней..я вообще все блоки написала, только картинки не приложила...

еле разобралась, но спасибо!
http://learn.javascript.ru/play/ZPTP8b

наведите - мерцает
а надо что б плавно из зеленого в красный

$(document).ready(function(){
	$('.about li').hover(function(){
		$(this).stop(true, true).animate({
			opacity: 0.4
		},
        function() {
          $(this).animate({ opacity: 1}); 
       });
	},
	function() {
		$(this).stop(true, true).animate({
			opacity: 0.1,
          'backgroundPosition': '0 0'
		},
        function() {
             $(this).animate({ opacity: 1 }); 
       });
	});
});

Как-то так

Плавно врятле получится. Чтобы перешло из зеленый в красный, надо постепенно менять много цветов. Хотя может и другой вариант есть

jQuery UI

$(document).ready(function(){
    $("#sample").mouseover(function() {
         $(this).animate({ backgroundColor:'#f00'},1000);
    }).mouseout(function() {
        $(this).animate({ backgroundColor:'#ccc'},1000);
    });       
});​

zebra, спасибо тебе решение работает, но не одинаково в браузерах: в опере все ок, в ие8 нет, нам надо в последних браузерах что б было

cmd , что-то ты все не то даешь( у меня не фон залит цветом, а картинки

tina, а. ой.