我用 3 个正方形构建了这个标记。在任何方块悬停时，中间的水平条将执行 2 个动画：
- 为边距设置动画
- 动画高度
我已经按照教程 [http://css-tricks.com/full-jquery-animations/][1] 但是因为一旦鼠标悬停并允许队列有两个动画似乎与另一个动画冲突建造。要重现，请尝试在 3 个单元格上猛烈移动鼠标。
在这里查看我的 JS Fiddle：[http://jsfiddle.net/xtTcv/][2]
HTML：
<div id="home-feature-wrapper">
<div class="home-feature">
<img src="/5e7uj.jpg" alt="aerobed feature" />
<div class="home-feature-text">
<a href="#"><span class="feature-text-top">CHECKOUT</span><br />
<span class="feature-text-bottom">OUR SPECIALS</span>
</a>
<div class="home-feature-details">
<p>Don't miss out on items specially discounted for our web store!</p>
<a href="#" class="button">CLICK HERE</a>
</div>
</div>
</div>
<div class="home-feature">
<img src="5e7uj.jpg" alt="aerobed feature" />
<div class="home-feature-text">
<a href="#"><span class="feature-text-top">SIGN UP</span><br />
<span class="feature-text-bottom">FOR SAVINGS</span>
</a>
<div class="home-feature-details">
[[ConLib:SubscribeToEmailList Caption="Subscribe To Email List" EmailListId="1"]]
<p>Sign up to receive the lastest news on special coupon codes, discounts, and other money-saving deals!</p>
</div>
</div>
</div>
<div class="home-feature">
<img src="5e7uj.jpg" alt="aerobed feature" />
<div class="home-feature-text">
<a href="#"><span class="feature-text-top">TOP SELLER</span><br />
<span class="feature-text-bottom">PREMIUM COMFORT</span>
</a>
<div class="home-feature-details">
<p>Shop our most popular items and see what everyone is talking about!</p>
<a href="#" class="button">CLICK HERE</a>
</div>
</div>
</div>
</div>
CSS：
#home-feature-wrapper {
background: none repeat scroll 0 0 #FFFFFF;
height: 280px;
margin: 400px auto -30px;
overflow: hidden;
padding-right: 5px;
width: 972px;
z-index: 1;
}
#home-feature-wrapper img {
margin: 10px 5px 10px 0;
}
#home-feature-wrapper img:first-child {
margin-left: 10px;
}
#home-feature-wrapper .home-feature {
float: left;
height: 272px;
overflow: hidden;
}
#home-feature-wrapper .home-feature-text {
background: url("http://css-tricks.com/wp-content/csstricks-uploads/transpBlue75.png") repeat scroll 0 0 transparent;
color: #FFFFFF;
height: 62px;
margin-left: 10px;
margin-top: -182px;
overflow: hidden;
padding-top: 18px;
position: relative;
text-align: center;
width: 309px;
}
#home-feature-wrapper .home-feature-text a {
color: #FFFFFF;
}
#home-feature-wrapper .home-feature-text .feature-text-top {
font-size: 20px;
}
#home-feature-wrapper .home-feature-text .home-feature-details {
border-bottom: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
margin: 30px 20px 20px;
padding: 10px;
}
#home-feature-wrapper .home-feature-text .home-feature-details .widget div.innerSection div.header h2 {
font-size: 10px;
}
#home-feature-wrapper .home-feature-text .home-feature-details .widget div.innerSection .compactleft tbody tr th label#ctl00_ctl00_NestedMaster_PageContent_ctl00_UserEmailLabel {
display: none;
}
jQuery：
$(".home-feature").hover(function () {
$(".home-feature-text", this).filter(':not(:animated)').animate({ marginTop: "-272px" });
$(".home-feature-text", this).animate({ height: "244px" });
}, function () {
$(".home-feature-text", this).animate({ marginTop: "-182px" });
$(".home-feature-text", this).animate({ height: "62px" });
});