Затухание DIV In и Out на основе навигационной панели - PullRequest
Новая
       6

Затухание DIV In и Out на основе навигационной панели

4 голосов
/ 20 января 2011

Приветствия,

Я пытаюсь сделать простой DIVE / FADE DIV с текстом для каждой кнопки на панели навигации, используя jQuery, и я сталкиваюсь с некоторыми проблемами.Вот скриншот того, что я пытаюсь сделать:

Screenshot

В основном, когда пользователь наводит курсор на элемент на панели навигации, под навигацией появляется div с текстом, связаннымна эту кнопку.Разметка, которую я придумала до сих пор, ужасна, и я знаю, что это неправильный путь, я также попытался использовать массив и заполнить информационный div текстом из атрибута title навигационной кнопки - последний работал отлично, нозатем также появляется заголовок.

Помимо того, что он слишком сложный, он работает ... до определенного момента.Если пользователь быстро наводит указатель мыши на панель навигации и выходит из нее, это вызывает включение и выключение всего объекта (без использования: hidden и: visible) или не отображается, если используются: hidden и: visible.

Вот текущая разметка:

CSS для информации DIV 

#header-info-text {
    width: 480px;
    text-align: right;
    float: right;
    margin-right: 20px;
    padding-right:  25px;
    background: url('/images/info-arrow.png') top right no-repeat transparent scroll;
    color: #fff;
    display: none;
}

HTML для навигации 

<div id="navBar">
      <ul>
          <li class="nav-first nav-active"><a href="#">Home</a></li>
          <li id="navAbout"><a href="#">About</a></li>
          <li id="navPort"><a href="#">Portfolio</a></li>
          <li id="navServ"><a href="#">Services</a></li>
          <li id="navBlog"><a href="#">Blog</a></li>
          <li id="navContact" class="nav-last"><a href="#">Contact</a></li>
      </ul>
</div>
<div id="header-infoDIV">
      <span id="header-info-text"></span>
 </div>

Javascript 

$("#navBar ul li").hover(function() {
     var text;
     var id = $(this).attr('id');
     if (id == 'navAbout') {
     text = 'Learn more ..';
     } else if (id == 'navPort') {
      text = 'View our recent work and ongoing projects';
      } else if (id == 'navServ') {
      text = 'Learn about our services';
      } else if (id == 'navBlog') {
      text = 'View the our Blog';
      } else if (id == 'navContact') {
      text = 'We\'re looking forward to working with you!';
      } else {
      text = '';
       }
      $("#header-info-text").text(text);
      $("#header-info-text:hidden").fadeIn('slow');
      });
            $("#navBar ul").hover(function() {
                $("#header-info-text:hidden").fadeIn('slow');
            }, function() {
                $("#header-info-text:visible").delay(500).fadeOut('slow');
            });

Каков наилучший способ решения таких проблем?По сути, я хочу добавить DIV информационного текста, изменить его текст, когда пользователь переходит к другой кнопке, и скрыть его, когда он выходит из навигационной панели.

Спасибо!

РЕШЕНИЕ (спасибо jmans) 

 $("#navBar ul").hover(function() {
        $("#header-info-text").stop(true,true).fadeIn('slow');
    }, function() {
        $("#header-info-text").stop(true,true).delay(500).fadeOut('slow');
    });

ОБНОВЛЕНИЕ Благодаря предложению mVChr код был сокращен до нескольких строк.В сочетании с предложением, предоставленным jmans, он делает то, что я хотел: 

$("#navBar ul li a").hover(function() {
                var text = $(this).attr('rel');
                $("#header-info-text").text(text);
                $("#header-info-text").stop(true,true).fadeIn('slow');
            },
            function() { 
               $("#header-info-text").stop(true,true).delay(500).fadeOut('slow');
            });

Ответы [ 2 ]

2 голосов
/ 20 января 2011

Вы можете попробовать использовать метод stop (), чтобы остановить любую текущую анимацию при изменении состояния при наведении: 

        $("#navBar ul").hover(function() {
            $("#header-info-text:hidden").stop(true,true).fadeIn('slow');
        }, function() {
            $("#header-info-text:visible").stop(true,true).fadeOut('slow');
        });

Как и на другом анимационном вызове.

1 голос
/ 20 января 2011

Я не вижу мерцания, о котором вы говорите, происходит ли оно в определенном браузере? Я тестировал на Chrome и Firefox.

Однако я сделал эту скрипку , чтобы показать вам, как вы можете улучшить свой код, отделив контент от функциональности. По сути, если вы хотите обновить текст статуса, разумным местом для поиска будет HTML, а не код. Кроме того, наличие всех этих конкретных условий в коде не очень легко обслуживаемо. Подумайте, хотите ли вы добавить или изменить несколько пунктов меню.

Вместо этого я переместил текст статуса в атрибут title ссылок в вашем HTML-коде, и jQuery прочитал этот атрибут, чтобы получить текст. Это также уменьшает первые 15 строк вашего кода jQuery до 6 строк: 

$("#navBar ul li a").hover(function() {
    var text = $(this).attr('title');
    var id = $(this).attr('id');
    $("#header-info-text").text(text);
    $("#header-info-text:hidden").fadeIn('slow');
});
...