Question

Check the bottom for revised edition

Alright, here’s the issue. I have a li with a div inside, and I’m trying to hover the li to get the div to slide up into view.

Here’s the HTML:

<li id="one">
    <div>
        <h4>title</h4>
        <p>description</p>
    </div>
</li>

Right now I have this in my CSS:

#one div { display: none; }

And this for my JS:

$(document).ready(function() {

    $('#one').hover(function() {
        $('#one > div').css({ display : 'block' });
    });

});

I know I could just used CSS psuedo :hover to make it pop up, but I thought if I wanted to to a slide effect then I might as well do it all in JS. The first problem is this isn’t working :|. Once I get it to just show up I want to add a slide effect to it, and I’m not sure if this is the right way to approach doing that.

Thanks guys/gals

revised

New JavaScript

$(document).ready(function() {

    $('#one').hover(function () {
        $('#one > div').slideToggle();
    });

});

This works! Although it comes down from the top, and I planned on having it come up from the bottom.

Answer 1

Part of the problem is that slideUp() in jQuery hides the selection and slideDown() shows the selection. To have an element slide up into view, you need to do your own .animate().

CSS:
  #one {
    overflow: hidden;
    position: relative;
    border: 1px solid gray;
    height: 40px;
  }

  #one div { 
    position: absolute;
    bottom: -100%;
  }

jQuery:
  $('#one').hover(
    function() {
        $(this).find('div').animate({
            bottom: '0%'
        }, 'fast' );
    },function() {
        $(this).find('div').animate({
            bottom: '-100%'
        },'fast');
    }
  );

jsFiddle: http://jsfiddle.net/blineberry/mrzqK/