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?

 

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

Not sure if I've understood correctly, but to hide the panel again;

 

Replace:

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

 

With this:

<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 );
       }
   }
);

$( "a" ).mouseout(
   function( event ){

       event.preventDefault();

       if (div_02.is( ":visible" )){
           div_02.slideUp( 500 );
       }
       else {
           div_02.slideDown( 500 );
       }
   }
);

});        
</script>