Jquery Hover動畫排隊

Question

我已經建立了3格的標記。在任一平方懸停，中間橫條將執行2個動畫：

1. 動畫保證金
2. 動畫高度

我跟着教程[HTTP：// CSS -tricks.com/full-jquery-animations/][1]但是，因爲有兩個動畫似乎與其他動畫衝突，一旦鼠標懸停並允許隊列建立。要重現，請嘗試在3個單元格間猛烈移動鼠標。

見我的JS小提琴進入：[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" }); 
}); 

Answer 1

你是否在尋找：

$(".home-feature-text", this).stop(true).animate({ height: "62px", marginTop: "-182px"}); 

Answer 2

未將動畫放置在隊列上l在建立停止隊列：

$(".home-feature-text", this).animate({ height: "62px" }, { queue: false });