Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.02.2010, 16:01
Новичок на форуме
Отправить личное сообщение для g0ss Посмотреть профиль Найти все сообщения от g0ss
 
Регистрация: 12.02.2010
Сообщений: 4

Анимированное меню
Здравствуете. Подскажите, как сделать, средствами 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 и разобраться не смог...

Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 12.02.2010, 19:39
Аватар для sysya
Профессор
Отправить личное сообщение для sysya Посмотреть профиль Найти все сообщения от sysya
 
Регистрация: 27.12.2009
Сообщений: 292

$('#left li').hover(function(){/*здесь делаем что то если навести курсор*/},function(){/*здесь если убрать курсор*/});
А вообще надо изучать то что собираетесь использовать, вот онлайн учебник http://slyweb.ru/jquerymain/
__________________
Нет предела совершенству...
Ответить с цитированием
  #3 (permalink)  
Старый 14.02.2010, 19:16
Новичок на форуме
Отправить личное сообщение для g0ss Посмотреть профиль Найти все сообщения от g0ss
 
Регистрация: 12.02.2010
Сообщений: 4

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

Код:
$(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>
Ответить с цитированием
  #4 (permalink)  
Старый 15.02.2010, 08:58
Аватар для sysya
Профессор
Отправить личное сообщение для sysya Посмотреть профиль Найти все сообщения от sysya
 
Регистрация: 27.12.2009
Сообщений: 292

зачем эта штука?
$('.left_menu > .left_hover').empty();
И вообще задача кода какова?
__________________
Нет предела совершенству...
Ответить с цитированием
  #5 (permalink)  
Старый 15.02.2010, 17:47
Новичок на форуме
Отправить личное сообщение для g0ss Посмотреть профиль Найти все сообщения от g0ss
 
Регистрация: 12.02.2010
Сообщений: 4

Сообщение от sysya Посмотреть сообщение
зачем эта штука?
$('.left_menu > .left_hover').empty();
И вообще задача кода какова?
это можно убрать)

Задача в том, что бы при наведении курсора на кнопку плавно исчезала верхняя половина .пнг и появлялась нижняя.
Изображения:
Тип файла: png button.png (2.8 Кб, 7 просмотров)
Ответить с цитированием
  #6 (permalink)  
Старый 15.02.2010, 18:17
Аватар для sysya
Профессор
Отправить личное сообщение для sysya Посмотреть профиль Найти все сообщения от sysya
 
Регистрация: 27.12.2009
Сообщений: 292

Может так сделать
<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 () {
   //а тут наоборот
	});
});
__________________
Нет предела совершенству...
Ответить с цитированием
  #7 (permalink)  
Старый 15.02.2010, 20:26
Новичок на форуме
Отправить личное сообщение для g0ss Посмотреть профиль Найти все сообщения от g0ss
 
Регистрация: 12.02.2010
Сообщений: 4

Сообщение от sysya Посмотреть сообщение
Может так сделать
Нужно что бы можно было вставлять текст ссылки.

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

Пример меню:
Изображения:
Тип файла: jpg 1111.jpg (10.2 Кб, 7 просмотров)
Ответить с цитированием
  #8 (permalink)  
Старый 15.02.2010, 21:17
Аватар для sysya
Профессор
Отправить личное сообщение для sysya Посмотреть профиль Найти все сообщения от sysya
 
Регистрация: 27.12.2009
Сообщений: 292

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

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

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

Последний раз редактировалось sysya, 15.02.2010 в 21:27. Причина: добавить
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ищу jQuery плагин для создания меню Zeboton jQuery 9 15.09.2014 15:31
анимированное меню на jquery глючит в ie leCadavreExquis jQuery 3 30.12.2009 17:30
анимированное меню, многократный setInterval Askhsiv Элементы интерфейса 3 20.12.2009 17:32
Как "переключать" картинки в меню навигации? KirTer Элементы интерфейса 1 22.06.2009 11:49
Событие mouseout при наведении мыши на пункт меню WalterScott Events/DOM/Window 2 12.05.2009 22:05