向下滑动并向上滑动

Question

When hovering over div, second div slides down, and when not hovering slides back up. I am having issues in doing it the other way. Is there a way of making the div slide up on hover, and slide back down when not hovering? So essentially, it slides up into the hovering div

 function animationRollover(element, rollover) { $(element).hover(function() { $(rollover).slideDown(); }, function() { $(rollover).slideUp(); }); }; animationRollover('#divImage1', '#divTextImage1'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="divImage1" style="float: left; width: 280px; margin-left: 40px; border: 1px solid"> <div style="height: 50px;"> test </div> <div id="divTextImage1" style="width: 280px; height: 20px; background-color: rgba( 0,0,0,0.6 ); float: left; position: absolute; opacity: 0.5; color: white; display: none;"> test </div> </div> 

Answer 1

Remove display: none; from <div id='divTextImage1'" ..> style attribute and invert slideUp with slideDown .

 function animationRollover(element, rollover) { $(element).hover(function() { $(rollover).slideUp(); }, function() { $(rollover).slideDown(); }); }; animationRollover('#divImage1', '#divTextImage1'); 

 #divImage1 { position: relative; } #divTextImage1 { position: absolute; bottom: 0; } 

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="divImage1" style="float: left; width: 280px; margin-left: 40px; border: 1px solid"> <div style="height: 50px;"> test image <div id="divTextImage1" style="width: 280px; height: 20px; background-color: rgba( 0,0,0,0.6 ); float: left; position: absolute; opacity: 0.5; color: white;"> test text </div> </div> </div>