Как показать панель с hoverintent

Question

Привет, это довольно простые вещи jQuery, но я немного растерялся. Итак, у меня есть изображения размером 310px, которые в основном скрыты от страницы с чем-то вроде:

.bottom-panel {position: fixed;
width:874px;
height: 310px;
display: block;
bottom: -300px;
left: 150px;
background: url(theimg.png) transparent no-repeat;
}

только маленькая вкладка высотой 10px торчит внизу. Я пытаюсь с помощью плагина hoverIntent создать интерактивность, где при наведении курсора на маленькую вкладку CSS меняется на

bottom: 0px;

и оставайтесь «развернутым» на странице, пока мышь находится где-то внутри панели .bottom

Может кто-нибудь дать мне небольшой фрагмент или какое-нибудь руководство, чтобы помочь мне достичь этого?

Answer 1

Прежде всего, вы можете убедиться, что стандартное наведение jQuery работает на вас:

$('.bottom-panel').hover(function() {
  $(this).animate({bottom: 0}, 'fast');
}, function() {
  $(this).animate({bottom: -300}, 'fast');
});

После того, как все заработало так, как вы хотите, все, что вам нужно сделать, это заменить слово «hover» на «hoverIntent», и вам будет хорошо.