jquery - 向下滑动和向上滑动反向

Question

当悬停在 div 上时，第二个 div 向下滑动，而不悬停时向上滑动。我在以另一种方式做这件事时遇到了问题。有没有办法让 div 在悬停时向上滑动，在不悬停时向下滑动？所以本质上，它会滑入悬停的 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>

标签： jquery

Answer 1

display: none;从样式属性中删除并使用<div id='divTextImage1'" ..>反转。slideUpslideDown

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>