Это довольно просто, я уверен, но прослушиваю меня. У меня есть следующий код, чтобы скользить панель вверх при наведении указателя мыши на ссылку ниже, проблема заключается в том, что панель сдвигается назад, когда я перемещаюсь на нее (поскольку я перешел с триггера)
$('#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>
Любая помощь действительно ценится.
благодаря
Спасибо вам за образец скрипки. Для решения вашей проблемы см. Код ниже:
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:
Надеюсь, это именно то, что вы хотели.
РЕДАКТИРОВАТЬ
Я думаю, вы можете просто удерживать панель меню, пока вы не выберете другой блок меню. См. Пример кода ниже и 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);
}
);