jQuery hover to slide? | 易学教程

问题

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.

回答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/

回答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

回答3:

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/

回答4:

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().

回答5:

<!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

来源：https://stackoverflow.com/questions/7761729/jquery-hover-to-slide

标签

javascript

jquery

css

jquery-slide-effects