JQuery Hover Show Panel

0

Это довольно просто, я уверен, но прослушиваю меня. У меня есть следующий код, чтобы скользить панель вверх при наведении указателя мыши на ссылку ниже, проблема заключается в том, что панель сдвигается назад, когда я перемещаюсь на нее (поскольку я перешел с триггера)

$('#menu-item-245').hover(
     function() {

        var captionHeight = $('.fullTimeSection').height(); 
        captionHeight = parseInt(captionHeight, 10);
        var topHeight = 190 - captionHeight;
        var topHeight =+ topHeight + 'px';

        $('.fullTimeSection').stop().animate(
        {
            top: topHeight

        },
        500
        ); 
     },
     function() {
         $('.fullTimeSection').animate(
        {
            top: '190px'

        },
        500
        );
     }
  );

HTML в основном это:

<div id="panelHolder">

     <div class="fullTimeSection">
        Slide panel content here...
     </div>

   </div>

   <ul>
     <li id="#menu-item-245"><a href="page.html">Page</a></li>
     <li><a href="page.html">Page</a></li>
     <li><a href="page.html">Page</a></li>
   </ul>

Любая помощь действительно ценится.

благодаря

  • 0
    Покажите свой HTML-код, пожалуйста. Будет лучше, если вы покажете свою проблему в FIDDLE jsfiddle.net (удобнее помочь вам, как по мне)
  • 0
    Привет Мелвис, оригинал отредактирован с HTML
Показать ещё 1 комментарий
Теги:

1 ответ

0

Спасибо вам за образец скрипки. Для решения вашей проблемы см. Код ниже:

HTML:

<div id="wrapper">
    <div id="panelHolder">
        <div class="panel" id="fullTimeSection">Content 1!</div>    
        <div class="panel" id="sixthFormSection">Content 2!</div>    
        <div class="panel" id="partTimeSection">Content 3!</div>
    </div>    

    <nav role="category-navigation" id="catNav">
        <ul id="menu-sections" class="section-menu">
            <li class="menu-item" data-id="fullTimeSection"><a href="#">Full Time</a></li>
            <li class="menu-item" data-id="sixthFormSection"><a href="#">Sixth Form</a></li>
            <li class="menu-item" data-id="partTimeSection"><a href="#">Part TIme</a></li>
        </ul>
    </nav>     
</div>

CSS:

#wrapper {width:100%; padding:0; position:relative; height:250px; margin-top:250px;}
#catNav ul {list-style-type:none; padding:0; margin:0;}
#catNav li {width:100px; display:inline-block; border:1px solid red;}

#panelHolder {position:absolute; top:-190px; width:100%; height:190px; overflow:hidden;}

.panel{width:94%; height:170px; padding:10px 3%; color:white; position:absolute; top:190px;}

.panel#fullTimeSection {background:#870057;}
.panel#sixthFormSection {background:#232323;}
.panel#partTimeSection { background:#555555;}

JS:

$('.menu-item').hover(
     function() {
         var panel = $('#' + $(this).data('id'));
         var captionHeight = panel.height();
         captionHeight = parseInt(captionHeight, 10);
         var topHeight = 190 - captionHeight;
         var topHeight =+ topHeight + 'px';
         panel.stop().animate({ top: topHeight }, 500); 
     },
     function() {
         $('#' + $(this).data('id')).animate({ top: '190px' }, 500);
     }
  );

И FIDDLE:

http://jsfiddle.net/QE67u/10/

Надеюсь, это именно то, что вы хотели.

РЕДАКТИРОВАТЬ

Я думаю, вы можете просто удерживать панель меню, пока вы не выберете другой блок меню. См. Пример кода ниже и FIDDLE, конечно:

$('.menu-item').hover(
     function() {
         $('.panel').animate({ top: '190px' }, 500);

         var panel = $('#' + $(this).data('id'));
         var captionHeight = panel.height();
         captionHeight = parseInt(captionHeight, 10);
         var topHeight = 190 - captionHeight;
         var topHeight =+ topHeight + 'px';
         panel.stop().animate({ top: topHeight }, 500); 
     }
  );

http://jsfiddle.net/QE67u/14/

  • 0
    Привет Мелвас, большое спасибо за вашу помощь. Да, его почти нет, но последнее, что мне нужно, это чтобы панель смещалась вверх и оставалась в рабочем состоянии, когда пользователь помещает в нее курсор, как мега-меню, но также и с другим содержимым. я знаю, что обычным способом было бы сделать их частью каждой жизни, таким образом, они естественным образом не ложатся спать, но я не могу, и они должны быть отдельными. Спасибо
  • 0
    Смотрите отредактированный ответ, пожалуйста
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню