jQuery hover to slide?_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-04-13 02:12 出处：网络

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.

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 di开发者_StackOverflow社区v { 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.

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/

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

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/

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

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