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 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
加载中,请稍侯......
精彩评论