Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Анимированное меню (https://javascript.ru/forum/jquery/7646-animirovannoe-menyu.html)

g0ss 12.02.2010 16:01
Анимированное меню
 
Здравствуете. Подскажите, как сделать, средствами 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 12.02.2010 19:39 
$('#left li').hover(function(){/*здесь делаем что то если навести курсор*/},function(){/*здесь если убрать курсор*/});
А вообще надо изучать то что собираетесь использовать, вот онлайн учебник http://slyweb.ru/jquerymain/

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

Код:
$(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 15.02.2010 08:58
зачем эта штука? 
$('.left_menu > .left_hover').empty();
И вообще задача кода какова?

g0ss 15.02.2010 17:47
Вложений: 1
Цитата:
Сообщение от sysya (Сообщение 44883)
зачем эта штука? 
$('.left_menu > .left_hover').empty();
И вообще задача кода какова?
это можно убрать)

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

sysya 15.02.2010 18:17
Может так сделать :) 
<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 15.02.2010 20:26
Вложений: 1
Цитата:
Сообщение от sysya (Сообщение 44928)
Может так сделать :)
Нужно что бы можно было вставлять текст ссылки.

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

Пример меню:

sysya 15.02.2010 21:17
Цитата:
Сообщение от g0ss (Сообщение 44943)
Нужно что бы можно было вставлять текст ссылки.

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

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


Часовой пояс GMT +3, время: 21:29.