Анимированное меню

[g0ss]

Здравствуете. Подскажите, как сделать, средствами jquery плавный переход от обычного стиля к hover.

CSS

#left li {
margin: 5px 10px 5px 10px;  
background-image:url(1.gif);
}

#left li:hover {
margin: 5px 10px 5px 0px; 
background-image:url(2.gif);
}

Нашел несколько схожих скриптов, но совсем незнаком с java script и разобраться не смог...

Спасибо.

[sysya]

$('#left li').hover(function(){/*здесь делаем что то если навести курсор*/},function(){/*здесь если убрать курсор*/});

А вообще надо изучать то что собираетесь использовать, вот онлайн учебник http://slyweb.ru/jquerymain/

[g0ss]

Не работает(объекты исчезают). Подскажите, что не так.

$(document).ready(function() {
	$('.left_menu').hover(function() {
		var fade = $('> .left_hover', this);
		if (fade.is(':animated')) {
			fade.stop().fadeTo(500, 1);
		} else {
			fade.fadeIn(500);
		}
	}, function () {
		var fade = $('> .left_hover', this);
		if (fade.is(':animated')) {
			fade.stop().fadeTo(500, 0);
		} else {
			fade.fadeOut(500);
		}
	});
	$('.left_menu > .left_hover').empty();
})

.left_menu {
	display: block; 
	margin: 5px 10px 5px 10px; 
	border: 0px solid #171717; 
	position:relative;
	background:url(img/button.png) 0 0 no-repeat;
}

.left_hover { 
	margin: 5px 10px 5px 0px; 
	background:url(img/button.png) 0 -20px no-repeat;
}

<li class='left_menu'><span class="left_hover"><a href='view_add.php?id=%s'>link1</a></span></li>
<li class='left_menu'><span class="left_hover"><a href='view_add.php?id=%s'>link2</a></span></li>

[sysya]

зачем эта штука?

$('.left_menu > .left_hover').empty();

И вообще задача кода какова?

[g0ss]

$('.left_menu > .left_hover').empty();

это можно убрать)

Задача в том, что бы при наведении курсора на кнопку плавно исчезала верхняя половина .пнг и появлялась нижняя.

[sysya]

Может так сделать

<a href="" class="menu"><img src="" class="topic"><img src="" class="nizoc"></a>

$(document).ready(function() {
$('.menu').hover(
           function() {
		if ($(this).find('.topic').is(':animated')) {
			$(this).find('.topic').stop().fadeTo(500, 0);
			$(this).find('.nizoc').stop().fadeTo(500, 1);

		} else {
			$(this).find('.topic').fadeOut(500);
			$(this).find('.nizoc').fadeIn(500);
		}
	}, function () {
   //а тут наоборот
	});
});

[g0ss]

Может так сделать

Нужно что бы можно было вставлять текст ссылки.

Спасибо, что помогаете.

Пример меню:

[sysya]

Нужно что бы можно было вставлять текст ссылки.

Спасибо, что помогаете.

Пример меню:

так вот какое меню надо, зачем тада половинки какие то разделять, что то с ними ковыряться....
А зачем использовать fadeOut? Про половинки .пнг я тоже не понял, если нужно фон двигать, то используем плагин http://plugins.jquery.com/files/jque...ition.js_7.txt (_7.txt удалить после сохранения на компе) и главной функции библы animate(), как замутить описание ищите сами... где там и как...
Если простое анимированное меню с hover всё делается просто только надо изучить jquery. И как говорят будет вам счастье