JQuery Hover Animation Queing

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

Не размещайте анимацию в очереди wil л остановить очереди из здания:

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