02-22-2010, 07:12 PM
|
#1
|
|
New Member
Join Date: Feb 2010
Posts: 5
|
Slidepanel with Jquery Doubt
hi there guys. I was making some test's here with jquery, wanting to make a slideup panel on mouseenter and mouseleave. It's the first time I'm working with javascript, so I don't know nothing about it. The panel is already sliding down (and i wanted ti slide up) at rollover. but I don't know how to do rollout. can someone help me to do a rollover and rollout and to make the panel slide to the right direction, please?
Code:
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<style type="text/css">
#div_01 {
height: 215px;
width: 200px;
}
#div_01 a {
height: 215px;
width: 200px;
background-color: #900;
display: block;
}
#div_02 {
height: 185px;
width: 170px;
background-color: #3F0;
padding: 15px;
display: none;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
jQuery(function( $ ){
var div_02 = $( "#div_02" );
$( "a" ).mouseover(
function( event ){
event.preventDefault();
if (div_02.is( ":visible" )){
div_02.slideUp( 500 );
} else {
div_02.slideDown( 500 );
}
}
);
});
</script>
</head>
<body>
<div id="div_01">
<a href="#"></a>
<div id="div_02">
</div>
</div>
</body>
</html>
thanks in advance
|
|
|
Linear Mode
