jQuery hover to slide?

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.

score 4 · Accepted Answer · answered Oct 14 '11 at 00:29

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/

Yes! I knew there was some work around to it, but I just couldn't remember. Thank you — uurrnn, Oct 14 '11 at 00:36

griegs · Answer 2 · 2011-10-14T01:18:25.467

2

what about using jQuery slideUp or fadeIn?

http://api.jquery.com/slideToggle/

http://api.jquery.com/slideDown/

http://api.jquery.com/slideUp/

This code works for me.

$(document).ready(function () {

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

});

Needs a bit of tweeking to make it look nice but it does slide down.

edit

Here is a site describing how to use animate to do what you want.

http://www.learningjquery.com/2009/02/slide-elements-in-different-directions

edited Oct 14 '11 at 01:18

answered Oct 13 '11 at 23:57

griegs

22,624
33
128
205

This doesn't resolve the first issue with no being able to get the jquery to show the div on hover. – uurrnn Oct 14 '11 at 00:12
hang on. i'll take a closer look – griegs Oct 14 '11 at 00:15
Actually T_T I forgot to link jQuery. Going to edit with the new issue in a sec. – uurrnn Oct 14 '11 at 00:19
See my edit. works for me. if this does not work for you then please let us know what errors you are getting. btw: stupid question, you have included the jQuery.js as a script in your page right? – griegs Oct 14 '11 at 00:21
Just now included jQuery. I was working on two sites at the same time and forgot to add it to the second one. Check the OP for the new problem. I'll add your code and see what happens. – uurrnn Oct 14 '11 at 00:24
I am currently using your code, except slideToggle(). Anyway to change the direction is slides in from? – uurrnn Oct 14 '11 at 00:34
Hmmm, if you want to control the direction use 'animate' instead. That will give you full control over direction and speed etc. – griegs Oct 14 '11 at 01:17

score 1 · Answer 3 · answered Oct 13 '11 at 23:59

1

you may do something like this

$(div).show("slide", { direction: "down" }, 1000)

or even the animate property may solve your problems

more here

http://docs.jquery.com/UI/Effects/Slide api.jquery.com/animate/

answered Oct 13 '11 at 23:59

Ifewalter

114
2
6

Richard Andrew Lee · Answer 4 · 2011-10-14T00:19:30.500

1

firstly you need to create a min-width and min-height or something because li there is currently nothing to hover over.(just something to make the li have a presence put a red border on it and you'll see what I'm talking about.)

secondly I think you want to slideDown()... I think slideUp() will make it dissapear right?

I added a bg color for demo purposes.

hears a little demo: http://jsfiddle.net/R9A3G/

If you're looking for a specific animation you may have to do some css tricks along with jquery .animate().

edited Oct 14 '11 at 00:19

answered Oct 14 '11 at 00:14

Richard Andrew Lee

1,187
6
10

I have the li present on my version, just forgot to include that. I have it working now with slideToggle(), which is exactly how I want it. When you leave the li, it slide back away out of vision. Is there a way to change it to get it to slide from the bottom of the li instead of the top? – uurrnn Oct 14 '11 at 00:31

score 1 · Answer 5 · answered Oct 14 '11 at 00:43

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <style>#one div { display: none; }</style>
<head>
  <title></title>
</head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
   <script>
   $(document).ready(function() {

    $('#one').hover(function() {

      $("#one").find("div").slideDown("slow");
    });
    $('#one').mouseout(function() {

      $("#one").find("div").slideUp("slow");
    });
});
</script>

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

</html>

TRY THIS

jQuery hover to slide?

5 Answers5

Linked