jquery - 如何显示部分标题并在悬停时向上滑动整个标题

Question

我有以下 fiddle :http://jsfiddle.net/nyube8aw/

HTML:

<div class="box">
    <div class="caption">
        <h3>This is Image One</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla commodo dolor in dui lacinia gravida.</p>
    </div>
    <img src="http://i.stack.imgur.com/46ccz.jpg" />
</div>

如何修改代码，使 H3 保持可见，直到将整个内容向上滚动。

Answer 1

另一种方法是 jQuery animate。请参阅下面显示的示例。

$(document).ready(function() {
	$('.box').mouseenter(function(){
			$('.caption').stop().animate({height: "94%"});
		
		
    });	
    
    $('.box').mouseleave(function(){
			$('.caption').stop().animate({height: "15%"},  500, function() {
            });
		
    });
	});

.box {
	  position: relative;
	  float: left;
	  width: 300px;
	  height: 300px;
	  margin-right: 20px;
	}
	.last {
	  margin-right: 0;
	}
	.caption {
	  position: absolute;
	  background: #000;
	  opacity: 0.7;
	  bottom: 0;
	  left: 0;
	  width: 90%;
	  height: 15%; /* Auto can still work for the height */
	  padding: 5%;
	  color: #fff;
      padding-top:1%;
	}
	.full-height {
	  height: 90%;
	}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <div class="caption">
    <h3>This is Image One</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla commodo dolor in dui lacinia gravida.</p>
  </div>
  <img src="http://i.stack.imgur.com/46ccz.jpg" />
</div>

See on Fiddle

注意:请全屏查看代码段以查看它的工作情况，