Question

Hi this is pretty basic jQuery stuff but i am a little lost. So i have a 310px images that is mostly hidden from the page with something like:

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

only the little 10px high tab is sticking up at the bottom. I am trying, with the hoverIntent plugin, to create interactivity where hovering over the little tab causes the CSS to change to

bottom: 0px;

and stay “expanded” on the page as long as the mouse is anywhere within the .bottom-panel

Can someone give me a little snippet or some direction to help me achieve this?

Answer 1

First off, you could make sure jQuery’s standard hover works for you:

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

Once you’ve got that working the way you want it, all you need to do is replace the word ‘hover’ with ‘hoverIntent’, and you should be good to go.