Как добавить эффект наведения в меню с помощью jQuery - PullRequest
Новая
       0

Как добавить эффект наведения в меню с помощью jQuery

0 голосов
/ 12 августа 2010

У меня есть верхнее меню на этой странице, реализованной в виде списка (UL с идентификатором "top-nav").

Я боролся с этим и пытался выяснить, как добавить эффект постепенного появления / исчезновения, используя jQuery, когда пользователь наводит курсор на него. Таким образом, вместо мгновенного изменения фонового изображения, оно будет постепенно исчезать.

Вот HTML: 

<ul id="top-nav" class="flatList">
    <li>
      <a href="#">
         <span class="embed embed-top-nav">Home</span>
         <p>site home, news, highlights</p>
      </a>
    </li>
    <li><a href="#" class="embed embed-top-nav" >Watch UNC-TV</a></li>
    <li><a href="#" class="embed embed-top-nav">Learn</a></li>
    <li><a href="#" class="embed embed-top-nav">Support Us</a></li>
    <li><a href="#" class="embed embed-top-nav" id="nav-last">Contact</a></li>
</ul>

А вот CSS, который обрабатывает список и привязку тегов прямо сейчас: 

ul#top-nav {
  top:71px;
  margin-left:196px;
  position:absolute;
  width:659px;
  min-width:650px;
}
ul#top-nav li, ul#top-nav li a{
  width:131px;
  height:50px;
  float:left;
  border: 0px solid white;
}
ul#top-nav li a:link, ul#top-nav li a:visited {
  text-decoration:none;
  color: #2C6286;
  background: transparent url(../img/nav-button.png) no-repeat 0 11px;
  border: 0px solid green;  
  padding-top:9px;
  padding-left:14px;
  padding-top:9px;
  z-index:100000;
}
ul#top-nav li a:hover {
  background: transparent url(../img/nav-button.png) no-repeat 0 -45px;
}
ul#top-nav li .embed-top-nav {
  font-size:25px    
}
ul#top-nav li p {
  position:absolute;
  top:37px;
  width:109px;
  font-size:8px;    
  color:#666;
  cursor:pointer;
}
a:link#nav-last, a:visited#nav-last {
  background: transparent !important;
}
a:hover#nav-last {
  background: transparent url(../img/nav-button.png) no-repeat 0 -45px !important;
}

Спасибо.

1 Ответ

4 голосов
/ 12 августа 2010

Попробуйте: 

$('#top-nav').hover(function(){
  $('#element_id').fadeIn('slow');
}, function(){
  $('#element_id').fadeOut('slow');
});

Где top-nav - это идентификатор элемента, который находится на наведении, а element_id - это идентификатор элемента, который вы хотите увеличить / уменьшить.

В основном метод hover нуждается в двух функциях; первый выполняется, когда мышь входит в элемент, а второй запускается, когда мышь покидает его.

Подробнее:

...