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

Применение Fading эффекта к каждой ссылке сайта
Добрый день!Второй день бьюсь,над одной проблемой((( подскажите пожалуйста, как ПРАВИЛЬНЕЙ реализовать следующее:
при наведении на ссылки,в меню, к ним применялся определенный стиль с эффектом Fading() .
1.например, что бы при наведении на ссылку она заворачивалась в html теги.
пример. меню до наведения:
.hover_link_menu_1 {
	border-width:0px;
	background-image:url(../img/2.jpg);
	background-repeat:repeat-x;
}
.hover_link_menu_2 {
	border-width:0px;
	background-image: url(../img/1.jpg);
	background-repeat: no-repeat;
	padding-left:5px;
}
.hover_link_menu_3 {
	border-width:0px;
	background-image:url(../img/3.jpg);
	background-repeat: no-repeat;
	background-position:right;
	padding-right:5px;
	padding-bottom:4px;
	padding-top:2px;
}
        </div>
          <div class="user_menu">
              <ul style=" float:right"  id="menu_header">
              <li>
              <a href="#">РЕГИСТРАЦИЯ</a>
              </li>
              <li>
              <a href="#">ВХОД</a>
              </li>
              </ul>
          </div>


после(навели на "РЕГИСТРАЦИЯ" ):
<div class="user_menu">
              <ul style=" float:right"  id="menu_header">
              <li>
              	<div class="hover_link_menu_1">
                	<div class="hover_link_menu_2">
                    	<div class="hover_link_menu_3">
              			<a href="#">РЕГИСТРАЦИЯ</a>
                        </div>
			</div>
              	</div>
              </li>
              <li>
              <a href="#">ВХОД</a>
              </li>
              </ul>
          </div>

По идее здесь нужно воспользоваться функцией:
$(this).wrap("<div id='' />");

но как обернуть ссылку в 3 дива ?

2.Ну и главный вопрос, как применить Fading() к ссылке с добавленными дивами?
наверно,проще будет применить display none к диву с классом hover_link_menu_1 и следом Fading() ?
примерно так:
$(document).ready(function() {
$(".float a").hover(
	function(){ //over
        $(this).wrap("<div id='' />"); (как-то обварачиваем 3мя дивами)
	$(".hover_link_menu_1").css("display","none");  (тушим главный див "предок")
	$('.hover_link_menu_1').fadeIn(); (появление кнопки со стилями)
			  },
    function(){ //out
	$('.hover_link_menu_1').fadeOut();
        $(this).wrap(" ");  (убираем дивы);

			  }
			             );
                              });

Последний раз редактировалось sosed2, 28.11.2011 в 22:24.
Ответить с цитированием